ng-repeat within modal view not working - html

I am trying to display a table of results from a mongodb but im just trying to gather some structure and learn at the same time so ive just got some dummy data at the moment within a controller
app.controller('modal-controller', function($scope) {
$scope.fakeResults = [
{
"id": "1",
"location": "3",
"value": "27.5"
}, {
"id": "2",
"location": "3",
"value": "27.0"
}, {
"id": "3",
"location": "3",
"value": "27.2"
}, {
"id": "4",
"location": "3",
"value": "27.9"
}, {
"id": "5",
"location": "3",
"value": "28.5"
}
];
});
The html for the modal section im trying to view the results is below
<div ng-controller="modal-controller" class="portfolio-modal modal fade" id="portfolioModal1" tabindex="-1" role="dialog" aria-hidden="true">
<div class="modal-content">
<div class="close-modal" data-dismiss="modal">
<div class="lr">
<div class="rl">
</div>
</div>
</div>
<div class="container">
<div class="row">
<div class="col-lg-8 col-lg-offset-2">
<div class="modal-body">
<h2>Temperature Table</h2>
<hr class="star-primary">
<p>TEST TEXT {{ fakeResults }}</p>
<tbody>
<tr ng-repeat="result in fakeResults">
<td>{{$index + 1}}</td>
<td>{{result.id}}</td>
<td>{{result.location}}</td>
<td>{{result.value}}</td>
</tr>
</tbody>
<img src="img/portfolio/cabin.png" class="img-responsive img-centered" alt="">
<p>This page will be used to display simple table of temperature results</p>
<ul class="list-inline item-details">
<li>Hardware:
<strong>Tinkerforge equipment linked</strong>
</li>
<li>Software:
<strong>Github Link</strong>
</li>
<li>Difficulty:
<strong>1</strong>
</li>
</ul>
<button type="button" class="btn btn-default" data-dismiss="modal"><i class="fa fa-times"></i> Close</button>
</div>
</div>
</div>
</div>
</div>
</div>
The results are visible after viewing the whole sample of data but not with ng-repeat. Not overly sure why this is but ive hopefully narrowed it down to something around the ng-repeat.
Thank You

You forgot table tag around your tbody
<table>
<tbody>
<tr ng-repeat="result in fakeResults">
<td>{{$index + 1}}</td>
<td>{{result.id}}</td>
<td>{{result.location}}</td>
<td>{{result.value}}</td>
</tr>
</tbody>
</table>

Related

AngularJS nested objects in the same bootstrap row

i have a JSON object
{
"products": [
{
"devices": [
{
"label": "P1D1"
},
{
"label": "P1D2"
}
]
},
{
"devices": [
{
"label": "P2D1"
},
{
"label": "P2D2"
}
]
}
]
}
and i want to have in HTML something like this
<div class="row">
<div class="col-3">
P1D1
</div>
<div class="col-3">
P1D2
</div>
<div class="col-3">
P2D1
</div>
<div class="col-3">
P2D2
</div>
</div>
AngularJS is the language i am using, but i don't seem the find the right syntax
<div class="row">
<div ng-repeat="product in obj.products">
<div class="col-3" ng-repeat="device in product.devices">
{{device.label}}
</div>
</div>
</div>
How can i achieve all the subitems to be displayed in a bootstrap column next to eachother?
I think you can't do it directly using only HTML. Alternatively you can use some manipulation in Javascript to flatten your data.
JAVASCRIPT
$scope.getItems = function(){
return $scope.obj.products.flatMap(function(element){
return element.devices;
})
}
HTML
<div class="col-3" ng-repeat="device in getItems()">
{{device.label}}
</div>
Check my example:
https://codepen.io/avgustint/pen/XWYyoyd?editors=1111

how to display different lists by a dynamic tab system?

I have an array of objects with the following structure:
[{
"name": "Equipment",
"functional_id": "furniture",
"products": [
{
"file": "data:image/;base64,",
"name": "White bags",
"description": "Reusable",
"id": 11,
"path": "",
"items": [
{
"name": "Small model",
"description": "25",
"price": 0,
"functional_id": "white_bags_small_model_by_25"
},
{
"name": "Medium model",
"description": "20",
"price": 0,
"functional_id": "white_bags_medium_model_by_20"
},
{
"name": "Large model",
"description": "10",
"price": 0,
"functional_id": "white_bags_large_model_by_10"
}
]
},
{
"file": "data:image/;base64,",
"name": "Burgundy bags",
"description": "Reusable",
"id": 12,
"path": "",
"items": [
{
"name": "Small model",
"description": "25",
"price": 0,
"functional_id": "bags_burgundy_bags_small_model_by_10"
},
{
"name": "Large model",
"description": "Par 10",
"price": 0,
"functional_id": "bags_burgundy_bags_large_model_by_10"
}
]
}
],
"sorting": 2300"
},
{
"name": "Documents",
"functional_id": "docs",
"products": [
{
"file": "data:image/;base64,",
"name": "Book of conventions",
"id": 17,
"path": "",
"items": [
{
"price": 0,
"functional_id": "agreement_book"
}
]
},
{
"file": "data:image/;base64,",
"name": "Procedure posters",
"description": "Procedure",
"id": 18,
"path": "",
"items": [
{
"price": 0,
"functional_id": "posters_procedure_of_taking_in_charge"
}
]
},
{
"file": "data:image/;base64,",
"name": "Services Brochures",
"description": "Brochures",
"id": 19,
"path": "",
"items": [
{
"price": 0,
"functional_id": "services_brochures"
}
]
},
{
"file": "data:image/;base64,",
"name": "Catalogue",
"id": 20,
"path": "",
"items": [
{
"price": 0,
"functional_id": "catalogue"
}
]
}
],
"sorting": 2400
},
{
"name": "Products",
"functional_id": "prods",
"products": [
{
"file": "data:image/;base64,",
"name": "Articles",
"id": 19,
"path": "",
"items": [
{
"price": 0,
"functional_id": "book_1"
}
]
},
{
"file": "data:image/;base64,",
"name": "Procedure_b",
"description": "Procedure",
"id": 24,
"path": "",
"items": [
{
"price": 0,
"functional_id": "book_charge"
}
]
},
{
"file": "data:image/;base64,",
"name": "Book Services",
"description": "Book Services",
"id": 26,
"path": "",
"items": [
{
"price": 0,
"functional_id": "book_services"
}
]
},
{
"file": "data:image/;base64,",
"name": "Catalogue",
"id": 32,
"path": "",
"items": [
{
"price": 0,
"functional_id": "catalogue"
}
]
}
],
"sorting": 4400
}
]
and I represent it in my application with the following html:
<div class='col-lg-12' *ngIf="this.market && this.market.length>0 ">
<ng-container *ngFor='let category of this.market | orderBy:"sorting"'>
<h2>{{category.name}}</h2>
<table class='table table-bordered bg-white'>
<thead class='bg-quinary d-xl-table-row d-none'>
<th>Produits</th>
<th>Description</th>
<th>Prix HT</th>
<th>Quantités</th>
</thead>
<tbody>
<tr *ngFor='let product of category.products | orderBy:"id"' class=" ">
<td>
<div class="d-flex">
<div *ngIf="product && product.path " style="width: 150px">
<img class="img-fluid" src="{{product.file}}" alt="" width="150px">
</div>
<div style="flex: 5" class="p-2">
<h2 class="p-1">{{product.name}}</h2>
<p [innerHTML]="product.description" class="text-muted" *ngIf=" product && product.description"></p>
</div>
</div>
</td>
<td class="p-0 d-xl-table-cell d-none">
<ul class="p-0 m-0">
<li *ngFor='let item of product.items'>
<div style="line-height: 24px" class="">
<p>{{item.name}}</p>
<p class="text-muted">{{item.description}}</p>
</div>
</li>
</ul>
</td>
<td class="p-0 d-xl-table-cell d-none">
<ul class="p-0 m-0">
<li *ngFor='let item of product.items'>
<span>{{item.price || '-'}} €</span>
</li>
</ul>
</td>
<td class="p-0 d-xl-table-cell d-none">
<ul class="p-0 m-0">
<li *ngFor='let item of product.items'>
<input type="number" [(ngModel)]="item.quantity" (change)="this.updateCart(item)" style="height: 45px; line-height: 45px" min="0">
</li>
</ul>
</td>
<td class="p-0 d-table-cell d-xl-none w-100">
<ul class="font">
<li *ngFor='let item of product.items' class=" p-3 item">
<div class="d-flex flex-column w-25 align-self-center">
<p>{{item.name}}</p>
<p class="text-muted">{{item.description}}</p>
</div>
<span class="d-flex flex-column w-25 align-self-center">{{item.price || '-'}} €</span>
<input class="d-flex flex-column w-25 align-self-center" type="number" [(ngModel)]="item.quantity" (change)="this.updateCart(item, product.id)" style="height: 45px" min="0" >
</li>
</ul>
</td>
</tr>
</tbody>
</table>
</ng-container>
</div>
Since the list of the different types of products is very wide (I have simplified the array of objects), a very large scroll is generated.
I am trying to create, following the same list style, a system of tabs through which to load the different types of products according to the tab you select.
To do this I am trying to use the following bootstrap component
<div class='col-lg-12' *ngIf="this.market && this.market.length>0 ">
<nav>
<div class="nav nav-tabs" id="nav-tab" role="tablist">
<a class="nav-item nav-link active" style="background-color: #0e5fa4;" id="nav-home-tab" data-toggle="tab" href="#nav-home" role="tab" aria-controls="nav-home" aria-selected="true"><p style="font-weight: bold; font-size: 15px; color: white; padding: 0;">Equipment</p></a>
<a class="nav-item nav-link" style="background-color: white; border: 0.5px solid #0e5fa4;" id="nav-profile-tab" data-toggle="tab" href="#nav-profile" role="tab" aria-controls="nav-profile" aria-selected="false">Documents</a>
<a class="nav-item nav-link" style="background-color: white; border: 0.5px solid #0e5fa4;" id="nav-contact-tab" data-toggle="tab" href="#nav-contact" role="tab" aria-controls="nav-contact" aria-selected="false">Products</a>
</div>
</nav>
In this way, the only thing I have managed to do is to show the different types of products in the different tabs in a static way, but I cannot make the dynamic navigation between them.
If someone sees what I'm doing wrong.
A greeting and thank you in advance
Here is a barebones implementation of dynamic tabs in Angular, with a list of items in each tab. Demo up on Stackblitz.
Template:
<!-- Tab Buttons -->
<ul class="tabs">
<li *ngFor="let tab of tabs; let i = index">
<button (click)="selectedTab = i" [ngStyle]="selectedTab === i && {'background':'blue', 'color':'white'}">{{tab.label}}</button>
</li>
</ul>
<!-- Tab Content -->
<div>
<h3>{{tabs[selectedTab].label}}</h3>
<ul>
<li *ngFor="let item of tabs[selectedTab].items">{{item}}</li>
</ul>
</div>
Component:
tabs = [
{
label: 'Products',
items: ['Ball', 'Car', 'Bricks']
},
{
label: 'People',
items: ['Alice', 'Bob', 'Chris']
}, {
label: 'Animals',
items: ['Dog', 'Cat', 'Mouse']
}
];
selectedTab = 0;
tabs in the component represents an array of the objects you want to present with tabs. This is far simpler than the data structure you've posted, but the principles are the same.

How to show dynamic image using from baseurl+filename using *ngFor

I have my base url say: http://www.example.com and file name is coming from api which is in dataSource like this:
[
{
"bid": "2",
"bnam": "ChickenChilli",
"adds": "nsnnsnw, nnsnsnsn",
"pdap": "5",
"pdp": "50",
"rat": null,
"covr": "screenshot_20200403-225802_1_20200404154756935600.png"
},
{
"bid": "3",
"bnam": "Fudding",
"adds": "hhhnj, hhjj",
"pdap": "2",
"pdp": "60",
"rat": "4.7",
"covr": "screenshot_20200403-225438_20200405102523050200.png"
}
]
I am not able to set background image using ngfor
<div class="product-single-content" *ngFor="let d of dataSource" (click)="listItemClick(d.name)">
<a>
<div class="product-top" style="background-image:url('http://example.com/{{d.covr}}');">
<span><i class="fa fa-heart" aria-hidden="true"></i></span>
</div>
<div class="product-bottom">
<div class="content-left">
<h3>{{d.bnam}}</h3>
<span>{{d.adds}}</span>
<strong>₹{{d.pdap}} onwards</strong>
</div>
<div class="content-right" style="background:#00bcd4">
<p><span>{{d.rat}}</span><b>{{d.pdp}}%</b></p>
</div>
</div>
</a>
</div>
Try using setting style dynamically as :
<div class="product-top" [style.background]="'url(http://example.com/' + d.covr + ')'">
<span><i class="fa fa-heart" aria-hidden="true"></i></span>
</div>

Looping twig DIV and list with my JSON array

Hey Guys I have the following code which loops the <section> everytime I use it within the JSON. This works fine.
However, I am having problems with the nested loop {% for list in lists %} which handles the li elements. It comes out blank and seems to only loop twice when I inspect the element?
{# Question 1 #}
{% for question in questions %}
<section>
<div class="container question" id="question-one">
<div class="row row-eq-height">
<div class="gradient"></div>
<div class="col-md-1 green-box">
<div class="number"><span>1</span></div>
</div>
<div class="col-md-10 dark-grey-box text-center">
<div class="content-wrapper">
{{ question.text|markdown }}
{# SLIDER #}
<div class="row">
<div class="col-md-8 offset-md-2">
<div class="slider-container">
<ul class="list-inline justify-content-center range-labels">
{% for list in lists %}
<li class="list-inline-item"><img src="{{ list.img }}"><span>{{ list.label }}</span></li>
{% endfor %}
</ul>
<div class="range-wrapper">
<img src="../resources/images-assets/images/place-holder-slider.png">
</div>
</div>
</div>
</div>
<div class="cta-wrapper">
<button id="question-one-submit" onclick="buttonClick()">DONATE £1</button>
</div>
</div>
</div>
<div class="col-sm-1 dark-grey-box"></div>
</div>
</div>
</section>
{% endfor %}
In my JSON file I have laid everything out as follows:
"questions": [
{
"text": "##How confident are you in achieving your marketing goals this year?",
"lists": [
{ "img": "..\/resources\/images-assets\/images\/sad.svg", "label": "Dejected" },
{ "img": "..\/resources\/images-assets\/images\/sad.svg", "label": "Dejected" },
{ "img": "..\/resources\/images-assets\/images\/sad.svg", "label": "Dejected" },
{ "img": "..\/resources\/images-assets\/images\/sad.svg", "label": "Dejected" },
{ "img": "..\/resources\/images-assets\/images\/sad.svg", "label": "Dejected" }
]
}
],
I want the li to appear 5 times with the relevant image and label as I have added in the JSON file.
Can anyone point me in the right direction?
I managed to get this working correctly. Here is the markup:
{% for question in questions %}
<section>
<div class="container question" id="question-{{ loop.index }}">
<div class="row row-eq-height">
<div class="gradient"></div>
<div class="col-md-1 green-box">
<div class="number"><span>
{{ loop.index }}
</span></div>
</div>
<div class="col-md-10 dark-grey-box text-center">
<div class="content-wrapper">
{{ question.text|markdown }}
{# SLIDER #}
<div class="row">
<div class="col-md-8 offset-md-2">
<div class="slider-container">
<ul class="list-inline justify-content-center range-labels">
{% for option in question.options %}
<li class="list-inline-item"><img src="{{ option.img }}"><span>{{ option.label }}</span></li>
{% endfor %}
</ul>
<div class="range-wrapper">
<img src="images/place-holder-slider.png">
</div>
</div>
</div>
</div>
<div class="cta-wrapper">
<button id="button-{{ loop.index }}" onclick="buttonClick()">{{ question.button }}</button>
</div>
</div>
</div>
<div class="col-sm-1 dark-grey-box"></div>
</div>
</div>
</section>
{% endfor %}
The JSON file I am using to accompany this is as follows:
"questions": [
{
"text": "##How confident are you in achieving your marketing goals this year?",
"options": [
{ "img": "images/sad.svg", "label": "Dejected" },
{ "img": "images/thinking-2.svg", "label": "Doubtful" },
{ "img": "images/like.svg", "label": "Hopeful" },
{ "img": "images/check.svg", "label": "Upbeat" },
{ "img": "images/goal.svg", "label": "Surefire" }
],
"button": "DONATE £1"
},
{
"text": "##What are the greatest challenges you face?",
"options": [
{ "img": "images/money-bag.svg", "label": "Budget" },
{ "img": "images/team.svg", "label": "Resources" },
{ "img": "images/bar-chart.svg", "label": "ROI" },
{ "img": "images/timer.svg", "label": "Short-termis" },
{ "img": "images/martech.svg", "label": "Martech" }
],
"button": "DONATE £1"
},
{
"text": "##Where could external agencies add the most value?",
"options": [
{ "img": "images/networking.svg", "label": "ABM" },
{ "img": "images/increasing-stocks-graphic-of-bars.svg", "label": "Demand" },
{ "img": "images/options.svg", "label": "Strategy" },
{ "img": "images/full-items-inside-a-shopping-bag.svg", "label": "Sales Enablement" },
{ "img": "images/content.svg", "label": "Content" }
],
"button": "DONATE £1"
},
{
"text": "##Would you be interested in a further conversation?",
"options": [
{ "img": "images/thumb-down.svg", "label": "Don't contact me again" },
{ "img": "images/maybe.svg", "label": "Unlikely this year" },
{ "img": "images/info.svg", "label": "Need to know more" },
{ "img": "images/calendar.svg", "label": "Get a date in the diary" },
{ "img": "images/boy-broad-smile.svg", "label": "Call me now" }
],
"button": "DONATE £1"
}
],

Multidimensional array with jquery templates

I have the following javascript object
var arr = [
[
{ "id": 1, "name": "one" },
{ "id": 2, "name": "two" },
{ "id": 3, "name": "three" }
],
[
{ "id": 4, "name": "four" },
{ "id": 5, "name": "five" },
{ "id": 6, "name": "six" }
],
]
I'm trying to use jquery templates to create the following HTML
<div class="row">
<div class="cell">
<span>1</span> : <span>one</span>
</div>
<div class="cell">
<span>2</span> : <span>two</span>
</div>
<div class="cell">
<span>3</span> : <span>three</span>
</div>
</div>
<div class="row">
<div class="cell">
<span>4</span> : <span>four</span>
</div>
<div class="cell">
<span>5</span> : <span>five</span>
</div>
<div class="cell">
<span>6</span> : <span>six</span>
</div>
</div>
I am using the following templates with no luck :(
<script id="rowTemplate" type="text/x-jQuery-tmpl">
<div class="row">
{{tmpl "#cellTemplate"}}
</div>
</script>
<script id="cellTemplate" type="text/x-jQuery-tmpl">
<div class="cell">
<span>${id}</span> : <span>${name}</span>
</div>
</script>
The line that calls the template is the following:
$("#rowTemplate").tmpl(arr).replaceAll("#somediv");
I am getting only one row with one cell with no data...
<div class="row">
<div class="cell">
<span></span> : <span></span>
</div>
</div>
What am I doing wrong?
I think the problem is with usage of replaceAll and the missing parameter to tmpl in the template.
Try this(used replaceWith for #someDiv and passed $data as tmpl parameter for child template):
<script type="text/javascript">
var arr =
[
[
{
"id": 1,
"name": "one"
},
{
"id": 2,
"name": "two"
},
{
"id": 3,
"name": "three"
}
],
[
{
"id": 4,
"name": "four"
},
{
"id": 5,
"name": "five"
},
{
"id": 6,
"name": "six"
}
]
];
$(function(){
$("#somediv").replaceWith($("#rowTemplate").tmpl(arr));
});
</script>
<script id="rowTemplate" type="text/x-jQuery-tmpl">
<div class="row">
{{tmpl($data) "#cellTemplate"}}
</div>
</script>
<script id="cellTemplate" type="text/x-jQuery-tmpl">
<div class = "cell"><span>${id}</span>:<span>${name}</span></div>
</script>
<div id="somediv"></div>