ng-repeat 中的 Angularjs orderBy 无法按预期工作

Question

我的模板中有以下 div：

<div ng-repeat="item in billing_history | orderBy:'-timestamp'">{{ item.date }}</div>

---

console.log(JSON.stringify($scope.billing_history)) 给了我以下信息：

{
  "May, 2015":{
     "date":"May, 2015",
     "timestamp":1432921230
  },
  "March, 2015":{
     "date":"March, 2015",
     "timestamp":1427846400
  },
  "February, 2015":{
     "date":"February, 2015",
     "timestamp":1425168000
  }
}

---

不管怎样，都是这样显示的：

February, 2015
March, 2015
May, 2015

我试过orderBy:'-timestamp' 和orderBy:'+timestamp'

我真的不确定为什么这不起作用。有没有人看到任何可能出错的地方？

Answer 1

您不能将order-by 过滤器与对象文字一起使用（否则它不会按预期工作）。你所拥有的是一个对象文字，基本上没有特定的保证顺序键（以及它的值）。您需要将其转换为数组。

例子：

angular.module('app', []).run(function($rootScope) {
  $rootScope.billing_history = [{
    "date": "May, 2015",
    "timestamp": 1432921230
  }, {
    "date": "March, 2015",
    "timestamp": 1427846400
  }, {
    "date": "February, 2015",
    "timestamp": 1425168000
  }]
})

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="app">
  <p>Reverse order:
  <div ng-repeat="item in billing_history | orderBy:'-timestamp'">{{ item.date }}</div>
  <p>Correct order:
  <div ng-repeat="item in billing_history | orderBy:'timestamp'">{{ item.date }}</div>
</div>

过滤器是一种选择，但请注意，过滤器对性能的要求很高（它们在每个摘要周期运行多次以稳定，因此过滤器中的内容很重要），对于大型对象上的此类操作，它非常棘手。所以最好适当地设置视图模型或在控制器本身中转换格式。

Answer 2

orderBy 过滤器适用于数组，而您正在对象上使用它。把对象转成数组试试看。

演示 http://plnkr.co/edit/4XtrJQaJ1itrVbb9bwE7?p=preview

Answer 3

您可以像 Justin Klemm here 那样创建自己的自定义过滤器

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;
  };
});

然后你的标记变成：

<div ng-repeat="item in billing_history | orderObjectBy:'timestamp'">
  {{ item }}
</div>

或者

<div ng-repeat="item in billing_history | orderObjectBy:'-timestamp'">
  {{ item }}
</div>

看到这个jsBin