按对象的ng-repeat(键,值)对中的值排序

时间:2018-05-16 20:59:50

标签: javascript angularjs sorting

我是AngularJS的新手。使用API​​我得到了关键 - 与体育的价值配对

$scope.sports = { 1: "Soccer", 2: "Tennis", 3: "Basketball" ... };

是否可以按运动名称对项目进行排序:

<ul>
  <li ng-repeat="(id, value) in sports | orderBy:'value'">
      <a ng-href='/page/{{id}}'>{{value}}</a>
  </li>
 </ul>

这根本不起作用

https://jsfiddle.net/ak657soa/1/

 now is
--------------------
    Soccer // id: 1
    Tennis // id: 2
    Basketball // id: 3
    MMA // id: 4
    Street dance // id: 5
    Aerobics // id: 6
    Aerial hoop // id: 7

should be
    --------------------
    Aerial hoop // id: 7
    Aerobics // id: 6
    Basketball // id: 3
    MMA // id: 4
    Soccer // id: 1
    Street dance // id: 5
    Tennis // id: 2

我尝试使用underscore.js在控制器内对它们进行排序(我在不同的视图中使用它),但后来我丢失了有关ID的信息。就像这里:https://jsfiddle.net/vmbme3yw/1/

如何在AngularJs中处理orderBy值,其中是(键,值)对?

1 个答案:

答案 0 :(得分:4)

正如the documentation所说, orderBy 期望array作为输入,而不是对象。

因此解决方案是将对象转换为数组。您可以使用reduce方法执行此操作,方法是将回调函数作为argument传递。

$scope.sports = Object.keys($scope.sports).reduce(function(arr,key){
    arr.push({id: key, value: $scope.sports[key]})
    return arr;
},[]);

此外,您可以使用map方法。

$scope.sports = Object.keys($scope.sports).map((key) => ({id: key, value: $scope.sports[key]}));

现在,您可以按value字段显示订购的商品。

<li ng-repeat="elem in sports | orderBy:'value'">
     <a ng-href='/page/{{elem.id }}'>{{elem.value}}</a> // id: {{id}}
</li>

工作解决方案:

&#13;
&#13;
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
    $scope.sports = { 1: "Soccer", 2: "Tennis", 3: "Basketball", 4: "MMA", 5: "Street dance", 6: "Aerobics", 7: "Aerial hoop" };
    $scope.sports = Object.keys($scope.sports).map((key) => ({id: key, value: $scope.sports[key]}));
 });
&#13;
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-controller="myCtrl" ng-app="myApp">
    <ul>
      <li ng-repeat="elem in sports | orderBy:'value'">
       <a ng-href='/page/{{elem.id }}'>{{elem.value}}</a> // id: {{elem.id}}
      </li>
    </ul>
</div>
&#13;
&#13;
&#13;