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

标签 javascript html angularjs

我有一个字典(键值对),可能如下所示:

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/

相关文章:

javascript - LTPA ChallengeHandler Javascript MFP8

javascript - HTML5 音频暂停不起作用

HTML 对齐问题 : making rows and columns using div : float tag

javascript - 如何从 Controller 内切换此 notificationDirective 中的 ng-class?

javascript - AngularJS - 如何编译表单内的输入?

angularjs - 带有 Node + Express Web API 返回 JSON 资源的 Angular 应用程序与服务器端模板引擎

javascript - Highcharts 多个图例

javascript - Meteor js .allow 列表未显示

javascript - 输入框提交范围数字时出现错误

python - 将 JSON 从 flask 传递到模板并解码 html 实体