ng-repeat multiple times in Angularjs - javascript

I have this JSON
{
"Industrial Visits to L&T Construction Equipment Limited":
[
"1467970539_789007_2014.jpg",
"1467970539_644015.jpg",
"1467970539_238317.png",
"1467970539_946963.png"
],
"Industrial Visits to Titan":
[
"1467968484_995138.png",
"1467968226_987063.jpg",
"1467968226_210302.jpg",
"1467969523_721853.jpg"
]
}
I have to print title and its related images under that title on an HTML page.
I'm doing this:
<div ng-repeat="item in indusvisitlist">
<div ng-repeat="(key, value) in item">
<h3>{{key}}</h3>
<p class="col-md-6 col-sm-6" ng-repeat="image in value">
<img src="files/{{image}}" class="img-responsive img-thumbnail" />
</p>
</div>
</div>
I found this solution on another Stack overflow question. But it is not printing anything but
0
1
2
3
0
1
2
3
Can somebody please figure out where the problem might be. Thanks.

maybe you should try:
<div ng-repeat="(key, value) in indusvisitlist">
<h3>{{key}}</h3>
<p class="col-md-6 col-sm-6" ng-repeat="image in value">
<img ng-src="files/{{image}}" class="img-responsive img-thumbnail" />
</p>
</div>

Related

Creating a custom filter for ng-repeat

I'm trying to create a filter inside an ng-repeat. What i'm trying to achieve is a list -> more information on button click combination. I'm using the prestashop webservice for retrieving data. All the data is pulled from a json object.
So i did try some other solutions found on stack but sadly those didn't work for me. See the following example:
So my html exists of 2 blocks. One is a list of all orders, shortly summarized by id, date and the total payed amount. The other block would be the more information section. This section would show wich products were ordered, at what date, etc.
So i've created the list and made the div (each list item) a clickable element by adding ng-click. (yes i did also try a <button ng-click="function()"> but since it didn't made any difference between using the div or the button i've chosen for the div (layout).
So the onclick event grabs the order.id and adds it to a filter. This filter is then applied on the second "more information" block. This block should then filter this id and only grab that information. But thats where i've stranded since this part is still not working. So what i've tried so far is shown below:
My HTML
var myApp = angular.module('myApp',['ngRoute','cgNotify','pascalprecht.translate','ngCookies','ngSanitize']);
// Orders
myApp.controller('OrderController', function($scope, $http){
$http.get('config/get/getOrders.php').then(function(response){
$scope.orders = response.data.orders.order
});
$scope.currentOrder = {
"id": 3
};
console.log($scope.currentOrder);
$scope.showOrder = function(order) {
var order_id = order.id;
$scope.currentOrder = {
"id": parseInt(order_id)
};
console.log($scope.currentOrder);
return $scope.currentOrder;
}
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<!-- The list -->
<div class="col-lg-12" ng-controller="OrderController">
<div class="container">
<form class="defaultinput col-xl-5 col-lg-6 col-md-8 d-flex justify-content-start">
<svg class="align-self-center d-flex" height="20px" version="1.1" viewbox="7 5 20 20" width="20px" xmlns="http://www.w3.org/2000/svg">
<defs></defs>
<path d="M27,23.5376923 L20.7969231,17.3046154 C21.7538462,16.0192308 22.3276923,14.4292308 22.3276923,12.7007692 C22.3276923,8.44769231 18.8969231,5 14.6638462,5 C10.4307692,5 7,8.44769231 7,12.7007692 C7,16.9538462 10.4307692,20.4015385 14.6638462,20.4015385 C16.4084615,20.4015385 18.0123077,19.8092308 19.3,18.8223077 L25.4476923,25 L27,23.5376923 L27,23.5376923 Z M8.35846154,12.7007692 C8.35846154,9.20692308 11.1869231,6.36461538 14.6638462,6.36461538 C18.1407692,6.36461538 20.9692308,9.20692308 20.9692308,12.7007692 C20.9692308,16.1946154 18.1407692,19.0369231 14.6638462,19.0369231 C11.1869231,19.0369231 8.35846154,16.1946154 8.35846154,12.7007692 L8.35846154,12.7007692 Z" fill="#8E8E93" fill-rule="evenodd" id="Search-Icon" stroke="none"></path></svg>
<input class="form-control" placeholder="{{ 'Zoeken' | translate }}" type="text">
</form>
<div class="row listrow" ng-repeat="order in orders">
<div ng-click="showOrder(order)" class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
<div class="col-lg-3">
<p type="number" ng-bind="order.id" ng-value="order.id"></p>
</div>
<div class="col-lg-4">
<p ng-bind="order.invoice_date"></p>
</div>
<div class="col-lg-5">
<p ng-bind="order.total_paid_real"></p>
</div>
</div>
</div>
</div>
</div>
<!-- The more information block -->
<div class="col-lg-11" ng-controller="OrderController">
<div>
<div ng-repeat="order in orders | filter: currentOrder" class="text-center margin-t-10">
<div class="row listrow"></div>
<h1>{{ 'Totaal' | translate }}</h1><h1 ng-bind="order.id"></h1>
<h3>#010 - {{ 'Contant' | translate }} {{ 'Betaald' | translate }}</h3>
</div>
<div class="row listrow margin-t-20 no-border">
<div class="col-6">
Blauw shirt - Maat: L
</div>
<div class="col-1">
2x
</div>
<div class="col-5 text-right">
€ 200,00
</div>
</div>
<div class="row listrow no-border">
<div class="col-6">
Blauw shirt - Maat: L
</div>
<div class="col-1">
2x
</div>
<div class="col-5 text-right">
€ 200,00
</div>
</div>
<div class="row margin-t-30 justify-content-end">
<div class="col-6">
<div class="row">
<div class="col-6">
{{ 'Subtotaal' | translate }}
</div>
<div class="col-6 text-right">
€ 400,00
</div>
</div>
<div class="row listrow">
<div class="col-6">
21% {{ 'BTW' | translate }}
</div>
<div class="col-6 text-right">
€ 84,00
</div>
</div>
<div class="row">
<div class="col-5 padding-r-5">
{{ 'Totaal' | translate }}
</div>
<div class="col-3 align-self-center no-padding">
<h6>(2 items)</h6>
</div>
<div class="col-4 padding-l-0 text-right">
€ 484,00
</div>
</div>
</div>
</div>
</div>
<div class="row margin-t-100 d-flex justify-content-around">
<button ng-click="" type="button" class="smallbutton defaultbutton">{{ 'Print bon' | translate }}</button>
<a href="#/refund">
<button type="button" class="smallbutton defaultbutton">{{ 'Retour' | translate }}</button>
</a>
</div>
</div>
The JSON example
{"orders":{"order":[{"id":"1","id_address_delivery":"4","id_address_invoice":"4","id_cart":"1","id_currency":"1","id_lang":"1","id_customer":"1","id_carrier":"2","current_state":"5","module":"ps_checkpayment","invoice_number":"4","invoice_date":"2017-03-16 15:18:27","delivery_number":"4","delivery_date":"2017-03-16 15:18:27","valid":"1","date_add":"2017-03-16 14:36:24","date_upd":"2017-03-16 15:18:27","shipping_number":{"#attributes":{"notFilterable":"true"}},"id_shop_group":"1","id_shop":"1","secure_key":"b44a6d9efd7a0076a0fbce6b15eaf3b1","payment":"Payment by check","recyclable":"0","gift":"0","gift_message":{},"mobile_theme":"0","total_discounts":"0.000000","total_discounts_tax_incl":"0.000000","total_discounts_tax_excl":"0.000000","total_paid":"55.000000","total_paid_tax_incl":"55.000000","total_paid_tax_excl":"55.000000","total_paid_real":"55.000000","total_products":"53.000000","total_products_wt":"53.000000","total_shipping":"2.000000","total_shipping_tax_incl":"2.000000","total_shipping_tax_excl":"2.000000","carrier_tax_rate":"0.000","total_wrapping":"0.000000","total_wrapping_tax_incl":"0.000000","total_wrapping_tax_excl":"0.000000","round_mode":"0","round_type":"0","conversion_rate":"1.000000","reference":"XKBKNABJK","associations":{"order_rows":{"#attributes":{"nodeType":"order_row","virtualEntity":"true"},"order_row":[{"id":"1","product_id":"2","product_attribute_id":"10","product_quantity":"1","product_name":"Blouse - Color : White, Size : M","product_reference":"demo_2","product_ean13":{},"product_isbn":{},"product_upc":{},"product_price":"26.999852","unit_price_tax_incl":"27.000000","unit_price_tax_excl":"27.000000"},{"id":"2","product_id":"3","product_attribute_id":"13","product_quantity":"1","product_name":"Printed Dress - Color : Orange, Size : S","product_reference":"demo_3","product_ean13":{},"product_isbn":{},"product_upc":{},"product_price":"25.999852","unit_price_tax_incl":"26.000000","unit_price_tax_excl":"26.000000"}]}}},{"id":"2","id_address_delivery":"4","id_address_invoice":"4","id_cart":"2","id_currency":"1","id_lang":"1","id_customer":"1","id_carrier":"2","current_state":"5","module":"ps_checkpayment","invoice_number":"3","invoice_date":"2017-03-16 15:18:27","delivery_number":"3","delivery_date":"2017-03-16 15:18:27","valid":"1","date_add":"2017-03-16 14:36:24","date_upd":"2017-03-16 15:18:27","shipping_number":{"#attributes":{"notFilterable":"true"}},"id_shop_group":"1","id_shop":"1","secure_key":"b44a6d9efd7a0076a0fbce6b15eaf3b1","payment":"Payment by check","recyclable":"0","gift":"0","gift_message":{},"mobile_theme":"0","total_discounts":"0.000000","total_discounts_tax_incl":"0.000000","total_discounts_tax_excl":"0.000000","total_paid":"75.900000","total_paid_tax_incl":"75.900000","total_paid_tax_excl":"75.900000","total_paid_real":"75.900000","total_products":"73.900000","total_products_wt":"73.900000","total_shipping":"2.000000","total_shipping_tax_incl":"2.000000","total_shipping_tax_excl":"2.000000","carrier_tax_rate":"0.000","total_wrapping":"0.000000","total_wrapping_tax_incl":"0.000000","total_wrapping_tax_excl":"0.000000","round_mode":"0","round_type":"0","conversion_rate":"1.000000","reference":"OHSATSERP","associations":{"order_rows":{"#attributes":{"nodeType":"order_row","virtualEntity":"true"},"order_row":[{"id":"3","product_id":"2","product_attribute_id":"10","product_quantity":"1","product_name":"Blouse - Color : White, Size : M","product_reference":"demo_2","product_ean13":{},"product_isbn":{},"product_upc":{},"product_price":"26.999852","unit_price_tax_incl":"27.000000","unit_price_tax_excl":"27.000000"}
To make it easier i've also created a JSfiddle
So my question is, since the first set of the filter is working (3). Why isn't my on click function working? with the console.log() i checked if the id is selected and it is. So why isn't the filter updated?
If you have any questions please ask them as comments.
As always, Thanks in advance!

Create html block of code using loop in javascript

I want to create a block of html codes using loop 10 times. I searched in google & got some suggestions also, but I'm not able to create div within div. Below is the code i want to create using loop. I can do this using php, but I want to it using javascript.
<div class="row text-center">
<div class="col-sm-5" id="content">
<div class="containers">
<img data-toggle="magnify" src="images/wallets/w0.png" alt="" id="mainImage">
</div>
<div class="substituteImageContainer">
<img src="images/wallets/w0.png" id="substituteImage0" class="substituteImage" onclick="changeProductImageToSubImage(this.src)">
<img src="images/wallets/1.png" id="substituteImage1" class="substituteImage" onclick="changeProductImageToSubImage(this.src)">
<img src="images/wallets/2.png" id="substituteImage2" class="substituteImage" onclick="changeProductImageToSubImage(this.src)">
<img src="images/wallets/3.png" id="substituteImage3" class="substituteImage" onclick="changeProductImageToSubImage(this.src)">
<img src="images/wallets/4.png" id="substituteImage4" class="substituteImage" onclick="changeProductImageToSubImage(this.src)">
</div>
</div>
<div class="col-sm-7 text-left">
<h3>Product Name. : Cobbler Men's Leather Wallet - Black</h3>
<p>Description</p>
<ul class="descriptionText">
<li>Tastefully selected best-grade Cow leather, soft touch and feel, artistically handcrafted, classical looks and well-organised interior</li>
<li>2 Note compartments, 3 Credit Card slots, 1 slip pocket, 1 Coin pocket, 1 Key slot</li>
<li>Comes packed in a beautiful Gift-Box</li>
<li>Disclaimer: Actual product colour may vary slightly due to photographic lighting and/or your monitor settings.</li>
</ul>
<div class="container-fluid nomargin nopadding">
<div class="row productSpecifications nomargin nopadding">
<div class="col-sm-4 nomargin nopadding"><strong>Model Number : </strong><span id="modelNo">90876K</span></div>
<div class="col-sm-4 nomargin nopadding"><strong>Material : </strong><span id="modelMaterial">Leather</span></div>
</div>
<div class="row productSpecifications nomargin nopadding">
<div class="col-sm-4 nomargin nopadding"><strong>Item Height : </strong><span id="modelHeight">9.5</span> Cm</div>
<div class="col-sm-4 nomargin nopadding"><strong>Item Length : </strong><span id="modelLength">25</span> Cm</div>
</div>
<div class="row productSpecifications nomargin nopadding">
<div class="col-sm-4 nomargin nopadding"><strong>Item width : </strong><span id="modelWidth">10</span> Mm</div>
<div class="col-sm-4 nomargin nopadding"><strong>Item Weight : </strong><span id="modelWeight">50</span> Gm</div>
</div>
</div>
<br>
Enquire about this product
</div>
Use the document.write method:
for(var i=0; i<10; i++) {
document.write('<div>Your content here</div>');
}
<div id="root">
</div>

fetching data from JSON array in angularJS

From below JSON I want to retrieve all images from imagePath array. If I try to retrieve single image, it is being fetched smoothly. But the difficulty is arising while fetching imagePath array. Help me with the issue.
Thanks
1). JSON
[{
"senderName": "ABC",
"text": "Enjoy",
"imagePath": [
"../img/jellyfish.jpg",
"../img/cat.jpg",
"../img/fatmice.jpg",
"../img/duck.jpg",
"../img/d.jpg"],
"senderImage": "../img/abc.jpg"
}, {
"senderName": "XYZ",
"text": "Enjoy",
"imagePath": [
"../img/jellyfish.jpg",
"../img/cat.jpg",
"../img/d.jpg"],
"senderImage": "../img/abc.jpg"
}, {
"senderName": "PQR",
"text": "Enjoy",
"imagePath": [
"../img/jellyfish.jpg",
"../img/cat.jpg",
"../img/d.jpg"],
"senderImage": "../img/abc.jpg"
}]
2). that is the controller.js file for the above JSON
http.get('../js/postData.json')
.success(function (response) {
$scope.data = response;
console.log(response);
}).error(function (err) {
console.log(err);
})
3). And the corresponding HTML file is :
<div class="list" ng-repeat="user in data">
<a class="item item-avatar">
<img ng-src="{{user.senderImage}}" align="left">
<h4 align="left">
{{user.senderName}}
</h4>
</a>
<p>
{{user.text}}
</p>
<div>
<img ng-src="{{user.imagePath}}">
</div>
</div>
<div class="list" ng-repeat="user in data">
<a class="item item-avatar">
<img ng-src="{{user.senderImage}}" align="left">
<h4 align="left">
{{user.senderName}}
</h4>
</a>
<p>
{{user.text}}
</p>
<div>
<img ng-src="{{image}}" ng-repeat="image in user.imagePath">
</div>
</div>
Try this if you want to load all images:
<img ng-repeat="imagePath in user.imagePath" ng-src="{{imagePath }}">
try to use a nested loop
<img ng-repeat="singleImg in user.imagePath" ng-src="{{singleImg}}">
try this
<div class="list" ng-repeat="user in data">
<a class="item item-avatar">
<img ng-src="{{user.senderImage}}" align="left">
<h4 align="left">
{{user.senderName}}
</h4>
</a>
<p>
{{user.text}}
</p>
<div>
<!--Changes are made here-->
<div ng-repeat="path in user.imagePath">
<img ng-src="{{path}}">
</div>
<!--Changes ends here-->
</div>
</div>

reorder/sort ng-repeat list dynamically

I working on angularjs. I am trying to reorder the ng-repeat list.
There is list of online users.
Users can receive messages anytime. Whenever user receive the message i update the ui and show the recent message under the name.
I am trying to sort the user list based on the users who receive the recent message. The user who receive the messages should come at the top.
Some codes-
Userlist controller:
$scope.$watch('service.get.userList()', function (values) {
var result = [];
angular.forEach(values, function (value) {
processChatService.registerObserverCallback('lastMessage', function () { //i call this event when user receives the message
$scope.$apply(function () {
value.l = processChatService.get.lastMessage(value.u); //returns the recent message
value.time = processChatService.get.lastMessageTime(value.u); //returns time
});
});
value.l = processChatService.get.lastMessage(value.u); //it returns null if user havent recieve message
value.time = processChatService.get.lastMessageTime(value.u);
result.push(value);
});
$scope.users = result;
});
html:
<div ng-repeat="user in users | filter:search"> <a class="list-group-item" ng-click="click(user)" ng-href="">
<div class="row">
<div class="col-xs-2">
<div class="thumb-userlist-sm pull-left mr">
<img class="img-circle" ng-src="{{ user.p }}" alt="...">
</div>
</div>
<div class="col-xs-8">
<div class="message-sender">{{ user.n }}</div>
<div class="message-preview">{{user.l}}</div>
</div>
<div class="col-xs-2">
<div class="pull-right">{{user.time}}</div>
</div>
</div>
</a>
<div class="row">
<div class="col-xs-2"></div>
<div class="col-xs-10">
<div class="line-separator"></div>
</div>
</div>
</div>
What you'll probably want to do is order the ng-repeat:
<div ng-repeat="user in users | filter:search | orderBy: 'time'">
This will order the users on the time property of each user. It's also possible to reverse the sort order with -time.
For more information on the orderBy filter, check the angular documentation.
We can do this by using orderBy.Now it depends upon the requirement.In your case it is time.
<div ng-repeat="user in users | filter:search | orderby:'time'"> <a class="list-group-item" ng-click="click(user)" ng-href="">
<div class="row">
<div class="col-xs-2">
<div class="thumb-userlist-sm pull-left mr">
<img class="img-circle" ng-src="{{ user.p }}" alt="...">
</div>
</div>
<div class="col-xs-8">
<div class="message-sender">{{ user.n }}</div>
<div class="message-preview">{{user.l}}</div>
</div>
<div class="col-xs-2">
<div class="pull-right">{{user.time}}</div>
</div>
</div>
</a>
<div class="row">
<div class="col-xs-2"></div>
<div class="col-xs-10">
<div class="line-separator"></div>
</div>
</div>
</div>

How to change class depending on filter result in AngularJS?

I cannot work out how to change the style of a class depending on the status/result of the filter. My code:
<div data-ng-if="search.length >= 3" >
<div data-ng-class="{list:true}" style="margin-top: 30px;">
<a class="item item_recipe" data-ng-repeat="item in items | nonBlankFilter:search | filter:search" data-ng-click="$emit('search.click',item.PK);">
<img class="thumbnail" src="images/thumbnails/{{item.THUMB}}">
<div class="title">{{item.TITLE}}</div>
</a>
</div>
What is happening now, is the style "list" is still there which has a background and thus the background is still visible, even when there is no results in the filter.
I hope I have explained myself well.
You can assign your filter results to a intermediary variable and than use that variable to conditionally apply your class:
<div ng-if="search.length >= 3">
<div ng-class="{list: filteredItems.length}" style="margin-top: 30px;">
<a
class="item item_recipe"
ng-repeat="item in filteredItems = (items | nonBlankFilter:search | filter:search)"
ng-click="$emit('search.click',item.PK);"
>
<img class="thumbnail" src="images/thumbnails/{{item.THUMB}}">
<div class="title">{{item.TITLE}}</div>
</a>
</div>
</div>

Categories