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>