简体   繁体   English

如何通过对象的数字键反转Angular ngRepeat的顺序

[英]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;
  };
});

Plunker 柱塞

Hope it helps :) 希望能帮助到你 :)

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM