Using Angular JS's ngRepeat directive, how can I make it so that the resulting iterations go in the reverse order? I am using an object where the keys are numbers, and I'd like to sort by those, descending.
I know that you can't really sort an object by keys like this (without keeping a reference to an array), but is this at all possible with Angular?
<script src=".2.9/angular.min.js"></script>
<body>
<script>
var app = angular.module('myApp', []);
app.filter('orderObjectBy', function() {
return function(items, field, reverse) {
var filtered = [];
angular.forEach(items, function(item) {
filtered.push(item);
});
filtered.sort(function(a, b) {
return (a[field] > b[field] ? 1 : -1);
});
if (reverse) filtered.reverse();
return filtered;
};
});
app.controller('myController', ['$scope',
function($scope) {
$scope.data = {
2013: 'oldest 4',
2014: 'older 3',
2015: 'new 2',
2016: 'newest 1'
};
}
]);
</script>
<div id="myApp" ng-app='myApp' ng-controller="myController">
<div ng-repeat="(date,text) in data">{{text}}</div>
<hr/>
<div ng-repeat="(date,text) in data | orderBy:date:reverse">{{text}}</div>
<hr/>
<div ng-repeat="(date,text) in data | orderBy:'-date'">{{text}}</div>
<hr/>
<div><b>Correct Answer!:</b></div><hr/>
<div ng-repeat="(date,text) in data | orderObjectBy:date:true">{{text}}</div>
</div>
</body>Using Angular JS's ngRepeat directive, how can I make it so that the resulting iterations go in the reverse order? I am using an object where the keys are numbers, and I'd like to sort by those, descending.
I know that you can't really sort an object by keys like this (without keeping a reference to an array), but is this at all possible with Angular?
<script src="https://ajax.googleapis./ajax/libs/angularjs/1.2.9/angular.min.js"></script>
<body>
<script>
var app = angular.module('myApp', []);
app.filter('orderObjectBy', function() {
return function(items, field, reverse) {
var filtered = [];
angular.forEach(items, function(item) {
filtered.push(item);
});
filtered.sort(function(a, b) {
return (a[field] > b[field] ? 1 : -1);
});
if (reverse) filtered.reverse();
return filtered;
};
});
app.controller('myController', ['$scope',
function($scope) {
$scope.data = {
2013: 'oldest 4',
2014: 'older 3',
2015: 'new 2',
2016: 'newest 1'
};
}
]);
</script>
<div id="myApp" ng-app='myApp' ng-controller="myController">
<div ng-repeat="(date,text) in data">{{text}}</div>
<hr/>
<div ng-repeat="(date,text) in data | orderBy:date:reverse">{{text}}</div>
<hr/>
<div ng-repeat="(date,text) in data | orderBy:'-date'">{{text}}</div>
<hr/>
<div><b>Correct Answer!:</b></div><hr/>
<div ng-repeat="(date,text) in data | orderObjectBy:date:true">{{text}}</div>
</div>
</body>For example, i'd like this to sort from Most recent to Oldest (the opposite of what it does in this code)
Share Improve this question edited Apr 7, 2015 at 6:02 d-_-b asked Apr 7, 2015 at 5:49 d-_-bd-_-b 23.3k43 gold badges171 silver badges288 bronze badges 4- If you want to order by date in reverse order then just put '-' before the field name. So the code will be "(date,text) in data | orderBy:'-date'" – Anita Commented Apr 7, 2015 at 5:56
- use filter.. I mean -ng-repeat='(date,text) in data s | orderBy:date:reverse' – Ved Commented Apr 7, 2015 at 5:58
- Thanks guys, but I've tried that with the updated code in my question it doesn't seem to work. – d-_-b Commented Apr 7, 2015 at 6:00
- @Anita you were right but that is only possible for the case of array and Ved yah reverse is a good option but it also only work for array. You guys can check the issue here github./angular/angular.js/issues/8458 – squiroid Commented Apr 7, 2015 at 6:10
1 Answer
Reset to default 6ng-repeat doen't work with object for it you need to create your custom filter.
<div ng-repeat="(date,text) in data | orderObjectBy:date:true">{{text}}</div>
app.filter('orderObjectBy', function() {
return function(items, field, reverse) {
var filtered = [];
angular.forEach(items, function(item) {
filtered.push(item);
});
filtered.sort(function (a, b) {
return (a[field] > b[field] ? 1 : -1);
});
if(reverse) filtered.reverse();
return filtered;
};
});
Plunker
Hope it helps :)