在項目中，遇到一個問題，Angular中的ng-repeat中，track by和order by同時使用時候，order by失效了。
我們先來看一下ng-repeat的工作原理。
這裡有一個Demo:
1.原始狀態
index.html
<!DOCTYPE html><html><head><meta charset="UTF-8"><title>Insert title here</title></head><body ng-app="app" ng-controller="ctrl"><div ng-repeat="person in peoples " ><span>**************************************</span><ui><li>{!person.name!}</li><li>{!person.age!}</li><li>{!person.country!}</li></ui><div ng-if="person.age=='12'"><span>12>>>>>>></span></div><div ng-if="person.age=='21'"><span>21>>>>>>></span></div><div ng-if="person.age=='19'"><span>19>>>>>>></span></div><script src="angular.js"></script><script src="controller.js"></script></body></html>
controller.js
/** * */var app = angular.module('app',[]);app.controller('ctrl',function($scope){ $scope.peoples=[{ age: 12, name:'Jesus', country:'spain' }, { age: 21, name:'Dave', country:'USA' }, { age: 19, name:'Carolina', country:'Italy' }]; $scope.order = 'name';});
效果如下：
我們可以看到，ng-repeat精確的顯示了我們的所有資料。
2.然後對，index.html中做一下更改，
<div ng-repeat="person in peoples | orderBy: order" >
效果如下：
我們看到，這裡ng-repeat按照我們的設定，按姓名排了序。
3.我們再來做一下更改
<div ng-repeat="person in peoples track by person.age | orderBy: order " >
效果如下：
我們看到這時候，orderBy失效了。
4.在angular1.2以後，加入了一個新的屬性，track by。當沒有這個屬性的時候
<div ng-repeat="person in peoples " >
ng-repeat預設的為每一個迴圈的對象添加一個$$hashkey, 這個屬性是自增的，有點類似於資料庫中的id自增，不過是個字串類型。
當我們的資料發生變化時（沒有track by的情況下），ng-repeat會重新的重新整理我們的Dom樹，這裡的重新整理是指的刪除掉所有已有的元素，然後重建Dom節點，並編號。這會導致我們的頁面可能會有頻繁的重新整理，可能會造成卡頓或者效能降低。
當我們加入track by這個屬性的時候
<div ng-repeat="person in peoples track by person.age" >
這個時候，ng-repeat會按照我們指定的編碼去標示一個對象，並在資料發生變化時，去更新這個Dom，而不是重建，這裡也要求我們指定的對象是唯一的。比如這裡的person.age就不可以相同。否則會報錯。
如果我們再引入orderBy就看到orderBy和track by同時出現的時候，orderBy失效了。其實，是我們寫的文法不正確。
正確的文法是這樣的：
<div ng-repeat="person in peoples | orderBy: order track by person.age" >
一定要注意track by是在orderBy後面的。
效果如下：
按照慣例，我們列出一些可能需要的參考資料：
1.http://www.codelord.net/2014/04/15/improving-ng-repeat-performance-with-track-by/
2.http://www.tuicool.com/articles/YvYJBrV
3.http://www.colabug.com/thread-1152220-1-1.html
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
