AngularJS ng-repeat指令中使用track by子語句解決重復(fù)數(shù)據(jù)遍歷錯誤問題
本文實例講述了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表達式。
// 業(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入門與進階教程》及《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)文章
AngularJS入門教程之 XMLHttpRequest實例講解
本文主要講解 AngularJS XMLHttpRequest,這里給大家整理相關(guān)資料并提供實例代碼,有需要的小伙伴參考下2016-07-07利用Angular2的Observables實現(xiàn)交互控制的方法
這篇文章主要介紹了利用Angular2的Observables實現(xiàn)交互控制的方法,我們主要針對一些在跟服務(wù)器端交互的時候遇到的問題,來看看Observable給我們帶來的特性。感興趣的可以了解一下2018-12-12快速解決angularJS中用post方法時后臺拿不到值的問題
今天小編就為大家分享一篇快速解決angularJS中用post方法時后臺拿不到值的問題,具有很好的參考價值,希望對大家有所幫助。一起跟隨小編過來看看吧2018-08-08AngularJS下$http服務(wù)Post方法傳遞json參數(shù)的實例
下面小編就為大家分享一篇AngularJS下$http服務(wù)Post方法傳遞json參數(shù)的實例,具有很好的參考價值,希望對大家有所幫助。一起跟隨小編過來看看吧2018-03-03使用AngularJS實現(xiàn)可伸縮的頁面切換的方法
這篇文章主要介紹了使用AngularJS實現(xiàn)可伸縮的頁面切換的方法,AngularJS是一款熱門的JavaScript庫,需要的朋友可以參考下2015-06-06AngularJS使用ng-options指令實現(xiàn)下拉框
這篇文章主要介紹了AngularJS使用ng-options指令實現(xiàn)下拉框效果,ng-option指令使用也很簡單,下文具體給大家說明,對angularjs 下拉框知識感興趣的朋友一起看下吧2016-08-08