[英]How to reverse the order of Angular ngRepeat by object's keys which are numeric
Using Angular JS's ngRepeat
directive, how can I make it so that the resulting iterations go in the reverse order? 使用Angular JS的ngRepeat
指令,如何使它以相反的顺序进行? 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? 我知道您真的不能通过这样的键对对象进行排序(不保留对数组的引用),但是使用Angular可以做到吗?
<script src="https://ajax.googleapis.com/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) 例如,我希望将其从“最新”到“最旧”排序(与此代码相反)
ng-repeat doen't work with object for it you need to create your custom filter. ng-repeat不适用于对象,因为您需要创建自定义过滤器。
<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;
};
});
Hope it helps :) 希望能帮助到你 :)
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.