AngularJS ng-repeat數組有重複值的解決方案_AngularJS

前言

大家都知道預設在ng-repeat的時候每一個item都要保證是唯一的，否則console就會打出error告訴你哪個key/value是重複的。

如：

$scope.items = [ 'red', 'blue', 'yellow', 'white', 'blue'];

這個數組blue就重複了，html這麼遍曆它

<li ng-repeat="item in items">{{ item }}</li>

控制台就會拋出一個錯誤：

點擊錯誤連結到Angular官網看詳細錯誤，官網明確給出是因為值重複了：

Duplicates in a repeater are not allowed. Use 'track by' expression to specify unique keys. Repeater: item in items, Duplicate key: string:blue, Duplicate value: blue

解決方案

這就納悶了，正常的業務裡數組有重複的值是很正常的，數組要硬要搞成唯一的ng-repeat才能遍曆就白瞎了，繼續往下看，發現官網給了一個解決的方案

<div ng-repeat="value in [4, 4] track by $index"></div>

於是按照這個方案改了一下

<li ng-repeat="item in items track by $index">{{ item }}</li>

重新整理網頁，內容被正常解析

其實ng-repeat還是需要一個唯一的key，只不過你不track的話預設就是item本身，另外也只有在普通資料類型字串，數字等才會出現這個問題，如果換成Object

$scope.items = [ ['red'], ['blue'], ['yellow'], ['white'], ['blue']];

html恢複為

<li ng-repeat="item in items">{{ item }}</li>

執行結果：

不明白的童鞋那就自己看看下面的運算運算式，猜猜結果是什麼，然後在瀏覽器的控制台試一試你的答案是否正確

[] === []

總結

以上就是這篇文章的全部內容了，希望本文的內容對大家的學習或者工作能帶來一定的協助，如果有疑問大家可以留言交流。