我有一个字典(键值对),可能如下所示:
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
适用于对象的属性,而不是您在 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>
关于javascript - 使用字典数据对 AngularJS ng-repeat 进行排序,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/48976978/