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