情景:
一般我們寫代碼的時候需要渲染列表等令杈。
實現:
使用ng-repeat
可以實現。
ng-repeat的坑:
ng-repeat
這個指令在運行時如果列表數據里有重復的值時會拋出異常迅皇,這是因為ng-repeat
在渲染數據時會重新編譯需要渲染的數據鸯隅,給每個元素加上一個唯一的$$hashKey
屬性可以與生成的dom綁定冠王,以便追。如果元素重復剑令,會導致自動生成$$hashKey
錯誤糊啡。
解決辦法:
ng-repeat = "item in items track by $index"
track by $index
是不去用angular自動生成$$hashKey
,而是直接把元素的索引拿來綁定吁津。
使用track by
的好處:ng-repeat
的數組被替換時, 它默認并不會重新利用已有的 dom 元素棚蓄,會刪除所有再次重新渲染。加了track by
,會給當前已有dom元素加上標示碍脏,會利用已有元素梭依,如果已有元素里已存在,就不會去重新渲染典尾。
使用$index的坑
場景如圖睛挚,當你展示的列表需要過濾時,而你過濾出來的列表用戶可能會去做增刪改變順序的操作急黎,可能會暴露出來的bug是會發(fā)現你操作刪除后你并不想刪除的一個元素被刪除了扎狱。問題所在是因為過濾前數據的index和過濾后的index會不一樣,因為index綁定在當前的item里了勃教,所以類似操作index需要謹慎操作淤击。
解決辦法:
可以在渲染數據前我們給數據手動生成item.id
屬性來代替$index
。