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

Cornelinux

我有一个字典（键值对），它可能是这样的：

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'">

没有效果。我将如何按价值排序？

萨吉塔兰

orderBy适用于对象的属性，而不是您在键，值中提到的方式。它也需要一个数组作为输入，而不是一个对象。

您可以使用 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>

本文收集自互联网，转载请注明来源。

如有侵权，请联系 [email protected] 删除。