AngularJS ng-repeat數(shù)組有重復(fù)值的解決方法
前言
大家都知道默認在ng-repeat的時候每一個item都要保證是唯一的，否則console就會打出error告訴你哪個key/value是重復(fù)的。
如：
$scope.items = [ 'red', 'blue', 'yellow', 'white', 'blue' ];
這個數(shù)組blue就重復(fù)了，html這么遍歷它
<li ng-repeat="item in items">{{ item }}</li>
控制臺就會拋出一個錯誤：
點擊錯誤鏈接到Angular官網(wǎng)看詳細錯誤，官網(wǎng)明確給出是因為值重復(fù)了：
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
解決方法
這就納悶了，正常的業(yè)務(wù)里數(shù)組有重復(fù)的值是很正常的，數(shù)組要硬要搞成唯一的ng-repeat才能遍歷就白瞎了，繼續(xù)往下看，發(fā)現(xiàn)官網(wǎng)給了一個解決的方案
<div ng-repeat="value in [4, 4] track by $index"></div>
于是按照這個方案改了一下
<li ng-repeat="item in items track by $index">{{ item }}</li>
刷新網(wǎng)頁，內(nèi)容被正常解析
其實ng-repeat還是需要一個唯一的key，只不過你不track的話默認就是item本身，另外也只有在普通數(shù)據(jù)類型字符串，數(shù)字等才會出現(xiàn)這個問題，如果換成Object
$scope.items = [ ['red'], ['blue'], ['yellow'], ['white'], ['blue'] ];
html恢復(fù)為
<li ng-repeat="item in items">{{ item }}</li>
執(zhí)行結(jié)果：
不明白的童鞋那就自己看看下面的運算表達式，猜猜結(jié)果是什么，然后在瀏覽器的控制臺試一試你的答案是否正確
[] === []
總結(jié)
以上就是這篇文章的全部內(nèi)容了，希望本文的內(nèi)容對大家的學(xué)習(xí)或者工作能帶來一定的幫助，如果有疑問大家可以留言交流。
相關(guān)文章
這篇文章主要為大家介紹了angular內(nèi)容投影，具有一定的參考價值，感興趣的小伙伴們可以參考一下，希望能夠給你帶來幫助2021-12-12
Angularjs 實現(xiàn)移動端在線測評效果(推薦)
這篇文章主要介紹了Angularjs 實現(xiàn)移動端在線測評效果,需要的朋友可以參考下2017-04-04
angular2實現(xiàn)統(tǒng)一的http請求頭方法
今天小編就為大家分享一篇angular2實現(xiàn)統(tǒng)一的http請求頭方法，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-08-08
本篇文章主要介紹了Angular中使用better-scroll插件的方法，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-03-03
AngularJS Toaster是一個 AngularJS 提示框.基于angular v1.2.6 及以上和angular-animate.這篇文章主要介紹了AngularJS Toaster使用詳解,需要的朋友可以參考下2017-02-02
AngularJS開發(fā)教程之控制器之間的通信方法分析
這篇文章主要介紹了AngularJS開發(fā)教程之控制器之間的通信方法,結(jié)合實例形式較為詳細的分析了AngularJS控制器之間通信的三種常用方式及相關(guān)使用技巧,需要的朋友可以參考下2016-12-12
這篇文章主要介紹了AngularJS HTML編譯器介紹,AngularJS的HTML編譯器能讓瀏覽器識別新的HTML語法。它能讓你將行為關(guān)聯(lián)到HTML元素或者屬性上，甚至能讓你創(chuàng)造具有自定義行為的新元素,需要的朋友可以參考下2014-12-12
angularjs循環(huán)對象屬性實現(xiàn)動態(tài)列的思路詳解
這篇文章主要介紹了angularjs循環(huán)對象屬性實現(xiàn)動態(tài)列的思路詳解,本文給大家分享一個demo代碼給大家介紹的非常詳細，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值，需要的朋友可以參考下2021-11-11
AngularJS基礎(chǔ) ng-submit 指令簡單示例
本文主要介紹AngularJS ng-submit 指令,這里對ng-submit 指令的基礎(chǔ)資料做了詳細介紹整理，并附有代碼示例，有需要的小伙伴可以參考下2016-08-08
本文主要介紹AngularJS ng-href 指令,這里對ng-href 基礎(chǔ)資料進行詳細介紹,并附代碼實例,有興趣的小伙伴可以參考下2016-08-08