javascript - 如何在 Angular JS ng-repeat 中对 1:1 对象映射进行排序

Question

有没有办法在 ng-repeat 块中使用过滤器（或任何其他方法）对 angular.js 中的 1:1 对象映射进行排序？

我有：

obj:{
     a:3,
     c:5,
     d:1,
     g:15
}

基本上我希望能够做这样的事情：

<div ng-repeat="item in obj | orderBy:'value'"> {{ item.value }}</div>

我希望能够通过键或值对该数据表示进行排序。我知道角度 OrderBy 只会对数组进行排序，因此不会对该对象进行排序。但是，如果我可以将该对象转换为具有键和值作为属性的对象数组（最好使用名为 'toArray' 的过滤器）：

var arr = [
  { 
     key:'a',
     value:'3'
  },
  {
    key:'c',
    value:5
  },
  ....
]

然后我可以使用这样的东西：

<div ng-repeat="item in obj | toArray | orderBy:'value'"> {{ item.value }}</div>

但是，任何编写这样一个过滤器的尝试都会产生'10 $digest() 迭代次数。中止！错误，因为它在每次迭代时更新新的对象数组。

对 1:1 对象映射进行排序而不需要重构控制器中的数据的最佳（或任何）解决方案是什么？

score 3 · Accepted Answer

尝试angular-underscore，它将下划线函数引入 angular.js。然后你可以编写如下代码：

<div ng-repeat="item in values(obj) | orderBy:identity"> {{ item }}</div>

只获取值；或者

<div ng-repeat="item in pairs(obj) | orderBy:last"> Key: {{ item[0] }}; Value: {{item[1]}}</div>

获取键和值。

这真的很容易。Plunker：http://plnkr.co/edit/Zb4XpaQUXZ8nZJqR493b?p= preview

score 0 · Accepted Answer

您是否考虑过像这样最初在控制器中创建数组？

$scope.items = [];
for(var key in obj) {
    if(obj.hasOwnProperty(key)) {
        $scope.items.push({ key: key, value: obj[key] });
    }
}

然后迭代items？

<div ng-repeat="item in items|orderBy:'value'">{{ item.value }}</div>

至少那时您只填充一次数组。如果初始对象来自请求或其他东西，这可能是一个问题，但我想你可以很容易地填充所述请求的回调。

2 回答 2