1

我的模板中有以下 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'

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

4

3 回答 3

2

orderBy过滤器适用于数组，您正在对象上使用它。将对象转换为数组并尝试一下。

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

于 2015-05-29T17:59:12.030 回答
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>

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

于 2015-05-29T18:05:33.960 回答
1

您可以像 Justin Klemm 在这里创建自己的自定义过滤器

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

于 2015-05-29T18:13:15.560 回答