Question

我参考了关于ngRepeat的角度documentation并迭代了对象属性，其中指出：

<div ng-repeat="(key, value) in myObj"> ... </div>

您需要知道JavaScript规范没有定义为对象返回的键的顺序。（为了缓解Angular中的这个问题 1.3 ngRepeat指令用于按字母顺序对键进行排序。）

说我有以下对象：

var myObj = {FOO: 0, BAR: 1};

并希望按价值（即0＆amp; 1）而不是按键排序。如何通过角度实现这一目标？（我顺便使用角度1.3）。

我试过了：

ng-repeat="(key, value) in myObj | orderBy:value"

但它不起作用......

有人可以帮忙吗？

Answer 1

与过滤器一样，orderBy仅适用于数组。一个简单的解决方案是使用从对象返回数组的函数：

<!DOCTYPE html>
<html>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<body>

<div ng-app="myApp" ng-controller="namesCtrl">

<input type="text" ng-model="searchText"/>
<ul ng-init="nameArray=objArray(names)">
  <li ng-repeat="x in nameArray | filter:searchText | orderBy: 'value.name'">
    {{x.value.name}}
  </li>
</ul>

</div>

<script>

angular.module('myApp', []).controller('namesCtrl', function($scope) {
    $scope.searchText='';
    $scope.names = {
  "1": {
       "name": "some"
  },
  "2": {
       "name": "values"
  },
  "3": {
        "name": "are"
  },
  "4": {
       "name": "there"
  },
  "5": {
        "name": "here"
  }
    };
$scope.objArray=function (obj) {
    var result=[];
    for (var key in obj) {
        result.push({
            key: key,
            value: obj[key]
        });
    }
    return result;
}


});
</script>

</body>
</html>

Answer 2

我相信最好和最优雅的解决方案是制作一个将对象更改为数组的过滤器。因此，您可以将模板中的所有项目重新使用，而无需编写任何js。

以下是过滤器的样子：

(function () {
    'use strict';

    angular.module('app').filter('toArray', toArray);

    toArray.$inject = [];

    function toArray() {
        return toArrayFilter;
        function toArrayFilter(input) {
            if (angular.isArray(input)) return input;
            var list = [];
            angular.forEach(input, iterateProperty, list);
            return list;
            function iterateProperty(elt, key) {
                this.push({ key: key, value: elt });
            }
        }
    }
})();

以下是您在html模板中使用它的方法：

<div ng-repeat="element in myObject | toArray | orderBy:value">
    {{element.key}}:
    <pre>{{element.value | json}}</pre>
</div>

使用ng-repeat迭代对象属性并按值排序而不是使用ng 1.3键

2 个答案: