AngularJS 尽管 ng-repeat 对象数组，orderBy 根本不起作用

Question

我无法弄清楚为什么我的 orderBy 过滤器根本不起作用，我已经查看了所有奇怪的解决方案，并且都指出 ng-repeat 是对对象的对象而不是对象数组进行操作。但是我的是一个对象数组，如下所示：

[Object, Object, Object]

0: Object
  $$hashKey: "object:19"
  dataLink: ""
  id: "633"
  name: "My first graph"
  order: 1
  parentTarget: ""
  presenceLink: ""
  size: 12
  span: 1
  subType: 1
  type: 1
  __proto__: Object
1: Object
  $$hashKey: "object:20"
  dataLink: ""
  id: "634"
  name: "My second graph"
  order: 2
  parentTarget: ""
  presenceLink: ""
  size: 6
  span: 1
  subType: 1
  type: 3
__proto__: Object
2: Object
  $$hashKey: "object:21"
  dataLink: ""
  id: "635"
  name: "My third graph but in front"
  order: 1
  parentTarget: ""
  presenceLink: ""
  size: 12
  span: 0
  subType: 1
  type: 1
__proto__: Object

为什么这不起作用：

<ul class="row graphs-list">
  <li class="col-xs-12 col-sm-6 col-md-{{graph.size}} graphs-item" ng-repeat="graph in ds.graphs | orderBy:'graph.order'">
    <pre>
      {{graph.order}}
    </pre>
    <h5 class="graph-name" ng-bind="graph.name"></h5>
    <am-menu host="graph" options="graphs"></am-menu>
    <nvd3 options="gv.options[gv.getTypeFromId(graph.type)]" data="gv.data[gv.getTypeFromId(graph.type)]"></nvd3>
  </li>
</ul>

有什么想法吗？

Answer 1

Angular 的 orderBy 已经在当前对象内部查找指定键 as you can see here，因此您只需像这样给出键：

<li class="col-xs-12 col-sm-6 col-md-{{graph.size}} p-x-md p-y-sm bg-light graphs-item" ng-repeat="graph in ds.graphs | orderBy:'order'">

Answer 2

试试这个。

function Main($scope) {
    $scope.items = [
      {
        id: "633", name: "My first graph",order: 8, parentTarget: "",
         presenceLink: "",size: 12,span: 1,subType: 1,type: 1
       },
     {
       id: "634",name: "My second graph", order: 2,parentTarget:    "",
       presenceLink: "",size: 6,span: 1,subType: 1,type: 3
     }
    ];
}

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>

<div ng-app>
    <div ng-controller="Main">
  <ul class="row graphs-list">
  <li  ng-repeat="item in items | orderBy:'order'">
    <pre>
      {{item.order}}
    </pre>
  </li>
</ul>
    </div>
</div>

Answer 3

你可以试试这个:)

(function(angular) {
  'use strict';
angular.module('orderByExample', [])
  .controller('ExampleController', ['$scope', function($scope) {
    $scope.graphs =
        [{id:'633', name:"My first graph", order:1},
         {id:'634', name:"My Second graph", order:4},
         {id:'635', name:"My Third graph", order:5},
         {id:'636', name:"My Fourth graph", order:6},];
  }]);
})(window.angular);

在HTML页

<body ng-app="orderByExample">
  <div ng-controller="ExampleController">
  <table class="friend">
    <tr>
      <th>Name</th>
      <th>Phone Number</th>
      <th>Age</th>
    </tr>
    <tr ng-repeat="graph in graphs | orderBy: 'order'">
      <td>{{graph.id}}</td>
      <td>{{graph.name}}</td>
      <td>{{graph.order}}</td>
    </tr>
  </table>
</div>
</body>

AngularJS 尽管 ng-repeat 对象数组，orderBy 根本不起作用

AngularJS orderBy not working at all despite ng-repeat over an array of objects

angularjs

angularjs-orderby