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

d-_*_*_-b 5 javascript angularjs

使用Angular JS的ngRepeat指令,我怎样才能使得生成的迭代以相反的顺序进行?我正在使用一个对象,其中键是数字,我想按那些排序,降序.

我知道你不能用这样的键对对象进行真正的排序(不保留对数组的引用),但这对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>
Run Code Online (Sandbox Code Playgroud)

例如,我想从最近到最旧的排序(与此代码中的相反)

squ*_*oid 5

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;
  };
});
Run Code Online (Sandbox Code Playgroud)

Plunker

希望能帮助到你 :)