Question

我有一个字典（键值对），可能如下所示：

data = {
    "key1": 1000,
    "key2": 2000,
    "key3": 500
}

我想在AngularJS的表格中查看。

我可以这样做：

<tr ng-repeat="(key, value) in data">
    <td>{{ key }}</td>
    <td>{{ value }}</td>
</tr>

到目前为止一切正常。

现在我希望按值对表进行排序。但orderBy过滤器似乎只适用于对象列表：

<tr ng-repeat="(key, value) in data | orderBy: 'value'">

无效。我将如何按值对其进行排序？

Answer 1

orderBy 对象的属性不起作用，而不是您在key，value中提到的方式。它还需要一个数组作为输入，而不是一个对象。

您可以使用angular.forEach将其转换为数组，并使用orderBy，如下所示

<强>样本

var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
	var	data = {"key1": 1000,
        "key2": 2000,
        "key3": 500 }
  
  $scope.data = [];
  angular.forEach(data, function(value, key) {
      $scope.data.push({
          key: key,
          count: value
      });
  });
 });

<!DOCTYPE html>
<html>

<head>
  <link rel="stylesheet" href="style.css">
  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.9/angular.min.js"></script>
</head>

<body>
  <div ng-controller="myCtrl" ng-app="myApp">
    <ul>
      <li ng-repeat="element in data | orderBy:'count'">
        {{ element.key }} ({{ element.count }})
      </li>
    </ul>
  </div>

</body>
</html>

使用字典数据对AngularJS ng-repeat进行排序

1 个答案: