Angularjs ng-repeat 中的 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

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

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

Answer 2

您不能将 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 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

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

Angularjs orderBy in ng-repeat not working as expected

angularjs

angularjs-orderby