1.當 ng-repeat 的數組被替換時, 它默認並不會重新利用已有的 Dom 元素,而是直接將其全部刪除並重新生成新的數組 Dom 元素:
2.Dom 的頻繁操作是非常不友好的, ng-repeat為什么不能利用已有的 dom 元素去更新數據呢?因為你沒有把數組元素的標識屬性告訴它,那么兩次替換的時候它就沒辦法追蹤了;
3.ng-repeat會為每一個元素加上一個hashkey $$hashKey來識別每一個元素,當我們從后端重新獲取數據時,即使數據完全一樣,但是由於hashKey不一樣,
angular會刪除之前的所有dom,重新生成新的dom,這樣效率就會大大降低。可以理解為ng-repeat默認是 track by $$hashKey的。
所以,我們應該使用一些不會變的東西來作為標識,比如后端數據的id.
4.列如:
<li class="gwclist" ng-repeat = "gwc in data | orderBy:'-sqtime' track by gwc.ID" ng-click = "gwcdetail(gwc)"> <h5>申請人:{{gwc.sqname}}<span class="pull-right color-dimgray">{{gwc.sqtime}}</span></h5> <span>用餐時間:{{gwc.mettime}}</span>
<p ng-class="{0:'color-lightyellow',1:'color-red',2:'color-blue',3:'color-dimgray'}[{{gwc.processState | showstyle}}]">流程狀態:{{gwc.processState}}</p> <div class="button-bar" ng-if = "gwc.processState == '未提交'"> <a class="button button-small button-positive" ng-click="submit(gwc.ID)">提交</a> <a class="button button-small button-stable" ng-click="delete(gwc.ID)">刪除</a> </div> </li>
優點:這樣當重新獲取數據時,由於ID沒有變,angular就不會去刪除原來的dom,只會更新其中的內容,不同的ID再添加新的dom。效率就能提升了;
5.注意:
track by要放在orderBy之后,否則會影響orderBy的效果;
當單一數組有重復元素時,需要使用track by $index來保證兩個元素都會渲染,否則只會渲染一個;