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过滤器适用于数组，您正在对象上使用它。将对象转换为数组并尝试它。

演示 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 orderBy在ng-repeat中没有按预期工作

3 个答案: