AngularJS orderby不能按预期工作

Question

我正在使用Angular指令来对表行进行orderBy操作，并将数据作为来自服务的对象数组传递。

<tr ng-repeat="album in vm.albums | orderBy: album.data.title"> 

    <td>{{album.data.title}}</td> 
    <td>{{album.data.date}}</td> 
    <td>{{album.data.type}}</td> 
    <td>{{album.data.username}}</td> 
</tr> 

这里是我的vm.albums阵列的样子：

vm.albums ---> [>Object1, >Object2, >Object3......] 

而且每个对象看起来像FOLL：

Object1 ---> {slug: "my-title", data: Object} 
Object2 ---> {slug: "beta-title", data: Object} 
Object3 ---> {slug: "alpha-title", data: Object} 

和对象Object1.data或任何物体vm.albums阵列看起来如下：

Object1.data ---> {title: "My Title", date: "2015-04-06", type: "Blue", username: 'rust'} 
Object2.data ---> {title: "Beta Title", date: "2012-04-07", type: "Orange", username: 'badname'} 
Object3.data ---> {title: "Alpha Title", date: "2013-09-06", type: "Lemons", username: 'xerox'} 

我仍然没有得到正确的排序<td>在我的表中使用我使用的orderBy。不知道我做错了什么。任何线索？

Answer 1

尝试

<tr ng-repeat="album in vm.albums | orderBy: 'data.title'"> 
    <td>{{album.data.title}}</td> 
    <td>{{album.data.date}}</td> 
    <td>{{album.data.type}}</td> 
    <td>{{album.data.username}}</td> 
</tr> 

Answer 2

看一看https://docs.angularjs.org/api/ng/filter/orderBy

你应该通过不变量的表达式

返回包含从指定集合中的项的阵列，通过基于使用计算出的值的比较器功能有序表达式谓词。

angular.module('myApp', []) 
 
    .controller('myController', function($scope) { 
 
    $scope.vm = { 
 
     albums: [{ 
 
     slug: "m", 
 
     data: { 
 
      title: "My Title", 
 
      date: "2015-04-06", 
 
      type: "Blue", 
 
      username: 'rust' 
 
     } 
 
     }, { 
 
     slug: "m", 
 
     data: { 
 
      title: "Beta Title", 
 
      date: "2012-04-07", 
 
      type: "Orange", 
 
      username: 'badname' 
 
     } 
 
     }, { 
 
     slug: "m", 
 
     data: { 
 
      title: "Another Title", 
 
      date: "2015-04-06", 
 
      type: "Blue", 
 
      username: 'rust' 
 
     } 
 
     }, ] 
 
    } 
 

 
    })

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> 
 
<div ng-app="myApp" ng-controller="myController"> 
 
    <table> 
 
    <tbody> 
 
     <tr ng-repeat="album in vm.albums | orderBy: 'data.title'"> 
 
     <td>{{album.data.title}}</td> 
 
     <td>{{album.data.date}}</td> 
 
     <td>{{album.data.type}}</td> 
 
     <td>{{album.data.username}}</td> 
 
     </tr> 
 
    </tbody> 
 
    </table> 
 
</div>