AngularJS ng-repeat指令中使用track by子语句解决重复数据遍历错误问题
本文实例讲述了AngularJS ng-repeat指令中使用track by子语句解决重复数据遍历错误问题。分享给大家供大家参考，具体如下：
我们可以使用ng-repeat指令遍历一个JavaScript数组，当数组中有重复元素的时候,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.
对于数字或者字符串等基本数据类型来说，它的id就是它自身的值。因此数组中是不允许存在两个相同的数字的。为了规避这个错误，需要定义自己的track by表达式。
// 业务上自己生成唯一的id
item in items track by item.id
//或者直接拿循环的索引变量$index来用
item in items track by $index
如果是javascript对象类型数据，那么就算内容一摸一样，ng-repeat也不会认为这是相同的对象。如果将上面的代码中dataList，那么是不会报错的。比如$scope.dataList = [{"age":10},{"age":10}];
更多关于AngularJS相关内容感兴趣的读者可查看本站专题：《AngularJS入门与进阶教程》及《AngularJS MVC架构总结》
希望本文所述对大家AngularJS程序设计有所帮助。
相关文章
这篇文章主要为大家详细介绍了基于angular实现三级联动的生日插件，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2017-05-05
AngularJS深入探讨scope，继承结构，事件系统和生命周期
这篇文章主要介绍了AngularJS的scope，继承结构，事件系统和生命周期,较为详细的分析了scope的作用域、层次结构、继承及生命周期相关概念与使用技巧,需要的朋友可以参考下2016-11-11
Angular中的ng-template及angular 使用ngTemplateOutlet 指令的方法
ng-template 是用来定义模板的，当使用ng-template定义好一个模板之后，可以用ng-container和templateOutlet指令来进行使用。这篇文章给大家介绍了Angular中的ng-templateangular及使用 ngTemplateOutlet 指令的方法，需要的朋友参考下吧2018-08-08
这篇文章主要介绍了Angular路由ui-router配置详解，非常不错，具有一定得参考借鉴价值，需要的朋友参考下吧2018-08-08
这篇文章主要为大家详细介绍了Angularjs使用过滤器完成排序功能，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2017-09-09
本文介绍了Angular父子组件是如何通讯的，对此感兴趣的同学，可以参考下，并且亲自实验一下。2021-05-05
本篇文章主要介绍了深究AngularJS之ui-router详解，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2017-06-06
AngularJS通过ng-route实现基本的路由功能实例详解
这篇文章主要介绍了AngularJS通过ng-route实现基本的路由功能,结合实例形式详细分析了AngularJS使用ng-route实现路由功能的操作步骤与相关实现技巧,需要的朋友可以参考下2016-12-12
下面小编就为大家带来一篇angular4模块中给标签添加背景图的实现方法。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧2017-09-09
本篇文章主要介绍了AngularJS手势事件的使用总结，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2017-08-08
最新评论