AngularJS ng-repeat指令中使用track by子語句解決重復(fù)數(shù)據(jù)遍歷錯誤問題
本文實(shí)例講述了AngularJS ng-repeat指令中使用track by子語句解決重復(fù)數(shù)據(jù)遍歷錯誤問題。分享給大家供大家參考，具體如下：
我們可以使用ng-repeat指令遍歷一個JavaScript數(shù)組，當(dāng)數(shù)組中有重復(fù)元素的時候,AngularJS會報錯:
Error: [ngRepeat:dupes] Duplicates in a repeater are not allowed. Use 'track by' expression to specify unique keys. Repeater: user in users, Duplicate key: number:1。下面的代碼就會報錯：
<html>
<head>
<script src="angular-1.2.2/angular.js"></script>
<script>
function rootController($scope,$rootScope,$injector)
{
$scope.dataList = [1,2,1];
}
</script>
</head>
<body ng-app ng-controller="rootController">
<div ng-repeat="data in dataList">
{{data}}
</div>
</body>
</html>
這是因為ng-Repeat不允許collection中存在兩個相同Id的對象。
For example: item in items is equivalent to item in items track by $id(item). This implies that the DOM elements will be associated by item identity in the array.
對于數(shù)字或者字符串等基本數(shù)據(jù)類型來說，它的id就是它自身的值。因此數(shù)組中是不允許存在兩個相同的數(shù)字的。為了規(guī)避這個錯誤，需要定義自己的track by表達(dá)式。
// 業(yè)務(wù)上自己生成唯一的id
item in items track by item.id
//或者直接拿循環(huán)的索引變量$index來用
item in items track by $index
如果是javascript對象類型數(shù)據(jù)，那么就算內(nèi)容一摸一樣，ng-repeat也不會認(rèn)為這是相同的對象。如果將上面的代碼中dataList，那么是不會報錯的。比如$scope.dataList = [{"age":10},{"age":10}];
更多關(guān)于AngularJS相關(guān)內(nèi)容感興趣的讀者可查看本站專題：《AngularJS入門與進(jìn)階教程》及《AngularJS MVC架構(gòu)總結(jié)》
希望本文所述對大家AngularJS程序設(shè)計有所幫助。
- 使用?Angular?服務(wù)器端渲染?Transfer?State?Service
- Angular?服務(wù)器端渲染緩存功能問題
- JS?Angular?服務(wù)器端渲染應(yīng)用設(shè)置渲染超時時間???????
- Angular?服務(wù)器端渲染應(yīng)用常見的內(nèi)存泄漏問題小結(jié)
- 如何處理Angular?錯誤消息ERROR?Error?NullInjectorError?No?provider?for?XX
- Angular處理未可知異常錯誤的方法詳解
- Angular?服務(wù)器端渲染錯誤消息localStorage?is?not?defined解決分析
相關(guān)文章
基于angular實(shí)現(xiàn)三級聯(lián)動的生日插件
這篇文章主要為大家詳細(xì)介紹了基于angular實(shí)現(xiàn)三級聯(lián)動的生日插件，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-05-05
AngularJS深入探討scope，繼承結(jié)構(gòu)，事件系統(tǒng)和生命周期
這篇文章主要介紹了AngularJS的scope，繼承結(jié)構(gòu)，事件系統(tǒng)和生命周期,較為詳細(xì)的分析了scope的作用域、層次結(jié)構(gòu)、繼承及生命周期相關(guān)概念與使用技巧,需要的朋友可以參考下2016-11-11
Angular中的ng-template及angular 使用ngTemplateOutlet 指令的方法
ng-template 是用來定義模板的，當(dāng)使用ng-template定義好一個模板之后，可以用ng-container和templateOutlet指令來進(jìn)行使用。這篇文章給大家介紹了Angular中的ng-templateangular及使用 ngTemplateOutlet 指令的方法，需要的朋友參考下吧2018-08-08
這篇文章主要介紹了Angular路由ui-router配置詳解，非常不錯，具有一定得參考借鑒價值，需要的朋友參考下吧2018-08-08
這篇文章主要為大家詳細(xì)介紹了Angularjs使用過濾器完成排序功能，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-09-09
本文介紹了Angular父子組件是如何通訊的，對此感興趣的同學(xué)，可以參考下，并且親自實(shí)驗一下。2021-05-05
本篇文章主要介紹了深究AngularJS之ui-router詳解，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-06-06
AngularJS通過ng-route實(shí)現(xiàn)基本的路由功能實(shí)例詳解
這篇文章主要介紹了AngularJS通過ng-route實(shí)現(xiàn)基本的路由功能,結(jié)合實(shí)例形式詳細(xì)分析了AngularJS使用ng-route實(shí)現(xiàn)路由功能的操作步驟與相關(guān)實(shí)現(xiàn)技巧,需要的朋友可以參考下2016-12-12
angular4模塊中給標(biāo)簽添加背景圖的實(shí)現(xiàn)方法
下面小編就為大家?guī)硪黄猘ngular4模塊中給標(biāo)簽添加背景圖的實(shí)現(xiàn)方法。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-09-09
本篇文章主要介紹了AngularJS手勢事件的使用總結(jié)，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-08-08