I have a problem with the print out Data from the array.
I have
{{orders}} =
[{"item":"DELL","quantity":6,"price":144},
{"item":"Samsung","quantity":3,"price":3131},
{"item":"222222","quantity":1,"price":31},
{"item":"111111111","quantity":1,"price":13}]
I try in View
<div ng-repeat="order in orders track by $index">
<span>{{ order[$index].item }}
</span>
</div>
And nothing. Can someone help me with that??
Edit:
Still does not work
{{orders}}
<div ng-repeat="order in orders track by $index">
<span>
{{order.item}}
</span>
and nothing
controller:
$scope.ListOfOrders = function () {
return ApiService.cart.list().then(function (resp) {
$scope.orders = resp[0].order;
console.log(resp[0].order)
});
}
UI
<div ng-repeat="order in orders track by $index">
<span>{{order.item}}</span>
</div>
Controller
$scope.orders = [{
"item": "DELL",
"quantity": 6,
"price": 144
}, {
"item": "Samsung",
"quantity": 3,
"price": 3131
}, {
"item": "222222",
"quantity": 1,
"price": 31
}, {
"item": "111111111",
"quantity": 1,
"price": 13
}]
Working Solution
You don't need to bind order[$index], ng-repeat itself iterates over every object so just write :
<div ng-repeat="order in orders track by $index">
<span>{{ order.item }}
</span>
</div>
Related
I have an AngularJS 1.X app with a date field retrieved from a .json file. The date is being converted from a string to a date object to order the list but I need to capture the "month" part of the date to group by and for separate display but can't figure it out.
Here's my controller and HTML:
Angular Controller:
(function () {
"use strict";
angular.module("xxyyzz")
.controller("displayEventCtrl", displayEventCtrl);
function displayEventCtrl($http) {
var model = this;
model.header = "Upcoming Events";
model.events = [];
$http.get("/App/Data/eventCalendar.json")
.then(function (response) {
model.events = response.data;
console.log(model.events);
});
model.sortDate = function (event) {
var date = new Date(event.date);
return date;
}
}
})();
HTML:
<div ng-controller="displayEventCtrl as model">
<h3><i class="fa fa-calendar"></i> {{model.header}}</h3>
<div class="list-group">
<a href="#" class="list-group-item" ng-repeat="event in model.events | orderBy : -model.sortDate : true track by $index">
<div class="list-group-item-heading">
<h4>{{event.title}}</h4>
</div>
<p class="list-group-item-text">
Tuctus placerat scelerisque.
</p>
<div class="row">
<div class="col-xs-6">
<span class="small">{{event.location}}</span>
</div>
<div class="col-xs-6">
<span class="small pull-right">
{{event.startTime}} - {{event.endTime}}
</span>
</div>
</div>
<div class="row">
<div class="col-xs-9">
<span class="small">{{event.city}}, {{event.state}}</span>
</div>
<div class="col-xs-3">
<span class="small pull-right">{{event.date}}</span>
<div class="clearfix"></div>
</div>
</div>
</a>
</div>
</div>
JSON example:`
[
{
"id": 1,
"title": "Christmas Parade",
"date": "12/25/2017",
"city": "Dallas",
"state": "TX",
"location": "Galleria Mall",
"startTime": "11:00",
"endTime": "15:00"
},
{
"id": 2,
"title": "Thanksgiving Parade",
"date": "11/23/2017",
"city": "Denver",
"state": "CO",
"location": "Mile High Stadium",
"startTime": "11:00",
"endTime": "15:00"
},
{
"id": 3,
"title": "Halloween Parade",
"date": "10/31/2017",
"city": "Sleepy Hollow",
"state": "NY",
"location": "Ichabod Crane House",
"startTime": "19:00",
"endTime": "21:00"
},
{
"id": 4,
"title": "Independence Day Fireworks",
"date": "07/04/2017",
"city": "Washington",
"state": "DC",
"location": "National Mall",
"startTime": "11:00",
"endTime": "15:00"
}
]
Any help would be appreciated.
You can use js api named moment. Inject moment as dependency. You can use moment to get date in any formate you want.
moment ().get ('month');
To get the month, use the getMonth() function
var Xmas95 = new Date('December 25, 1995 23:15:30');
var month = Xmas95.getMonth();
console.log(month); // 11
My issue is that I am trying to pull the date from the array in the ng-repeat. So I can't declare the variable like above as it is part of a returned array {{event.date}}. What I need to know is how to get that date part from the nested item.
Use a custom filter to convert the text data to a Date object:
angular.module("app",[])
.filter("toDate", function() {
return function(data) {
return new Date(data);
};
})
.run(function($rootScope) {
var vm = $rootScope;
vm.Xmas95 = 'December 25, 1995 23:15:30';
})
<script src="//unpkg.com/angular/angular.js"></script>
<div ng-app="app">
Month number = {{Xmas95 | toDate | date: 'MM'}}
</div>
For more information, see
AngularJS Developer Guide - Creating Custom Filters
AngularJS date Filter API Reference
in my ng-repeat list I am displaying object elements from an object array $scope.toBuy:
$scope.toBuy=[
cookies={
name:'cookies',quantity:0,bought:false
},
water={
name:'water',quantity:0,bought:false
},
bananas={
name:'bananas',quantity:0,bought:false
},
milk={
name:'milk',quantity:0,bought:false
},
coconut={
name:'coconut',quantity:0,bought:false
}
];
and I initialize all element's bought field to false. How do I display in a ng-repeat list that only shows elements that have false value in their bought field? I tried this:
<ul>
<li ng-repeat="item in toBuy | filter:{item.bought===false }">Buy 10 {{item.quantity}} {{item.name}} <button class="btn btn-default" ng-click="btnOnClick(item.name)"> Bought</button></li>
</ul>
but none of the elements displayed when the page is loaded. If I removed the filter, the whole list displays, which means I applied the filter wrong.
You are using invalid javascript object syntax {item.bought===false }
Change to
ng-repeat="item in toBuy | filter:{bought:false }"
DEMO
Your JSON is not a valid JSON.
Try this valid JSON :
[{
"name": "cookies",
"quantity": 0,
"bought": true
}, {
"name": "water",
"quantity": 0,
"bought": true
}, {
"name": "bananas",
"quantity": 0,
"bought": true
}, {
"name": "milk",
"quantity": 0,
"bought": false
}, {
"name": "coconut",
"quantity": 0,
"bought": false
}]
Working demo :
var myApp = angular.module('myApp',[]);
myApp.controller('MyCtrl', function($scope) {
$scope.toBuy=[{
"name": "cookies",
"quantity": 0,
"bought": true
}, {
"name": "water",
"quantity": 0,
"bought": true
}, {
"name": "bananas",
"quantity": 0,
"bought": true
}, {
"name": "milk",
"quantity": 0,
"bought": false
}, {
"name": "coconut",
"quantity": 0,
"bought": false
}];
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="myApp" ng-controller="MyCtrl">
<ul>
<li ng-repeat="item in toBuy | filter : {bought:false}">Buy 10 {{item.quantity}} {{item.name}} <button class="btn btn-default" ng-click="btnOnClick(item.name)"> Bought</button></li>
</ul>
</div>
Use ng-if (or ng-show):
<div ng-repeat="item in toBuy">
<div ng-if="item.bought===false">
Buy 10 {{item.quantity}} {{item.name}}
</div>
</div>
Try this:
<li ng-repeat="item in toBuy | filter:item.bought==false">
Or
<li ng-repeat="item in toBuy | filter:{bought:false}">
Will work, the second is a better way to achieve this.
I have this array of an array of objects that I am pushing onto from results I pass from a modal;
[
[
{
"id": 4,
"name": "THROTTLE TUBE",
"partno": "104-",
"oemnumber": "46019 038",
"stock": 19,
"price": "28"
},
{
"id": 28,
"name": "TACHOMETER, CUP",
"partno": "128-",
"oemnumber": "25012 011",
"stock": 7,
"price": "46"
}
]
]
I am getting this from the following;
$scope.woParts = [];
//later in my modal code - which is where the double [] is coming from
modalInstance.result.then(function(woParts) {
$scope.woParts.push(woParts);
I am then using this ng-repeat in my view;
<div ng-repeat="woPart in woParts">
<div class="col-md-4">
#{{ woPart[$index].name }}
</div>
<div class="col-md-2">
#{{ woPart[$index].oemnumber }}
</div>
<div class="col-md-2">
#{{ woPart[$index].price | currency}}
</div>
<div class="col-md-2">
<input type="number"
class="form-control"
ng-model="partQty">
</div>
</div>
This only displays the first result in the array. Why is that?
Thanks!
I don't think you should push woParts into another object. Just save it to the scope: $scope.woParts = woParts;. Then there is no need to use $index in the ngRepeat, just use regular dot notation: woPart.name.
Or if you have to push woParts into another array, then you can change the ngRepeat expression to woPart in woParts[0].
What I am trying to do is sort some data by field value.
$scope.testarr = [{"id":"1","name":"coffee"},
{"id":"2","name":"tea"},
{"id":"3","name":"coffee"},
{"id":"4","name":"ice coffee"}]
in the html file i have select box and 3 options called coffee, tea and ice coffee,
if i select coffee should be sorted like this
$scope.testarr = [{"id":"1","name":"coffee"},
{"id":"3","name":"coffee"},
{"id":"2","name":"tea"},
{"id":"4","name":"ice coffee"}]
if i select tea should be sorted like this
$scope.testarr = [
{"id":"2","name":"tea"},
{"id":"1","name":"coffee"},
{"id":"3","name":"coffee"},
{"id":"4","name":"ice coffee"}]
i'm trying to use order by but somehow it does't work
<div ng-repeat="item in testarr | orderBy: 'name'">
{{item.id}} ------ {{item.name}}
</div>
It does seem to work. Ensure that your ng-repeat has access to $scope.testarr (i.e. it is being declared on your $scope in the correct controller or directive.
angular.module('app', [])
.controller('ctrl', function($scope) {
$scope.testarr = [{
"id": "1",
"name": "coffee"
}, {
"id": "2",
"name": "tea"
}, {
"id": "3",
"name": "coffee"
}, {
"id": "4",
"name": "ice coffee"
}];
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="app">
<div ng-controller="ctrl">
<div ng-repeat="item in testarr | orderBy: 'name'">
{{item.id}} ------ {{item.name}}
</div>
</div>
</div>
I've got a JSON object with different events that looks like this:
{
"error":false,
"events":[
{
"id":1,
"title":"First entry",
"date":"2014-11-04"
},
{
"id":2,
"title":"Second entry",
"date":"2014-11-04"
},
{
"id":3,
"title":"Third entry",
"date":"2014-11-05"
},
{
"id":4,
"title":"Fourth entry",
"date":"2014-11-06"
},
{
"id":5,
"title":"Fifth entry",
"date":"2014-11-06"
}
]
}
This object is stored in $scope.events in my controller.
Now I'm looping this array to build the list of events:
<ion-list>
<div class="item item-divider">
{{event.date}}
</div>
<a class="item item-thumbnail-left" href="#/app/event/{{event.id}}" ng-repeat="event in events">
<img src="media/thumbnails/{{event.id}}.jpg">
<h1>{{event.title}}</h1>
</a>
</ion-list>
My goal is to display {{event.date}} as a list divider just once for every day. So in this examle it shoudl look like this:
2014-11-04 (divider)
First entry
Second entry
2014-11-05 (divider)
Third entry
2014-11-06 (divider)
Fourth entry
Fifth entry
I'm relly new to ionic & angular and I have no idea how to achieve this. May with some custom filter?
All in all I'm looking for something similar to Angular: Getting list with ng-repeat with dividers / separators but with the date as separator instead of initial letter.
Some ideas?
Any help/tip is really appreciated!
You can use angular.filters (https://github.com/a8m/angular-filter) to group your list by date please see demo below
var app = angular.module('app', ['angular.filter']);
app.controller('homeCtrl', function($scope) {
$scope.data = {
"error": false,
"events": [{
"id": 1,
"title": "First entry",
"date": "2014-11-04"
}, {
"id": 2,
"title": "Second entry",
"date": "2014-11-04"
}, {
"id": 3,
"title": "Third entry",
"date": "2014-11-05"
}, {
"id": 4,
"title": "Fourth entry",
"date": "2014-11-06"
}, {
"id": 5,
"title": "Fifth entry",
"date": "2014-11-06"
}]
}
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/angular-filter/0.4.9/angular-filter.min.js"></script>
<div ng-app="app">
<div ng-controller="homeCtrl">
<ion-list ng-repeat="(key, value) in data.events | groupBy: 'date'">
<div class="item item-divider">
<h1> {{key}}</h1>
</div>
<a class="item item-thumbnail-left" href="#/app/event/{{event.id}}" ng-repeat="event in value">
<img src="media/thumbnails/{{event.id}}.jpg">
<h3>{{event.title}}</h3>
</a>
</ion-list>
</div>
I solved this in another SO question here, Ionic Dynamic List Divider. Basically you can modify the list (in the controller, not the source of course) to include the dates. In your view, you notice this and render them as dividers.