angular中ng-repeat使用筆記

ng-repeat = 'item in items'

當items是一個簡單數組時,如果數組中有重復數據,會報錯.這是因為:出于性能考慮(可能還有其他因素),ng-repeat時會有一個默認的keep track函數來維護視圖中dom元素和可遍歷對象的一一對應關系,這樣當可遍歷對象發生變化,例如往數組中push一個值后,視圖中的所有dom元素不必全部重新渲染一遍

所以如果你想repeat一個包含重復數據的數組只需要修改默認的'keep track'函數,可以這樣寫:

ng-repeat = 'item in items track by $index'

性能優化

當遍歷一個對象數組時,可能通常會這樣寫:

<div ng-repeat="model in collection"> {{model.name}}</div>

這時默認會trackmodel對象,我們可以手動的更改track來減少數據更改時,重新渲染dom元素的工作量(即使collection中對象已經被替換成了新的),這在collection很大時性能提升是顯著的

如果model對象中存在唯一的id屬性,我們可以這樣寫:

<div ng-repeat="model in collection track by model.id"> {{model.name}}</div>

如果沒有唯一的id屬性,我們同樣可以加上track by $index

track by必須放在表達式的最后

關于ng-repeat-start/ng-repeat-end

必須配套使用
目前給我的感覺是避免了多余div節點的引入

最后編輯于
?著作權歸作者所有,轉載或內容合作請聯系作者
平臺聲明:文章內容(如有圖片或視頻亦包括在內)由作者上傳并發布,文章內容僅代表作者本人觀點,簡書系信息發布平臺,僅提供信息存儲服務。

推薦閱讀更多精彩內容