当前位置:首页 > 日记 > 正文

AngularJS ng-repeat指令中使用track by子语句解决重复数据遍历错误问题

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程序设计有所帮助。

相关文章

excel2007添加带圈字符的教程excel

excel2007添加带圈字符的教程excel

字符,教程,电脑软件,strong,nbsp,  Excel中的添加带圈字符具体该如何添加带圈字符呢?下面是小编带来的关于excel2007添加带圈字符的教程,希望阅读过后对你有所启发!excel2007添加带圈字符的教程 添加带圈字符步骤1:打开数据表,点击插入,对象e…

ppt2013如何添加动画触发器

ppt2013如何添加动画触发器

触发器,动画,方法,设置,电脑软件,  动画技术就是采用逐帧拍摄对象并连续播放而形成运动的影像技术。只要采用的逐格方式的拍摄方式,观看时连续播放形成了活动影像,它就是动画。如果在动画中在设置一个动画触发器,那么整个PPT中的动画就更显…

实例解析js中try、catch、finally

实例解析js中try、catch、finally

执行,实例,规则,电脑软件,finally,try: 语句测试代码块的错误,一般把可能会出错的代码放到这里 catch: 只有try里面的代码块发生错误时,才会执行这里的代码,参数err记录着try里面代码的错误信息 finally: 无论有无异常里面代码都会执行try{ co…

ppt怎么改变所有字体颜色图文教程

ppt怎么改变所有字体颜色图文教程

图文教程,字体颜色,电脑软件,ppt,  将幻灯片中的全部字体改变颜色是个浩大工程,那么如何快速改变全部字体的颜色呢?新手不会,上网找怕麻烦,而且教程太乱没有统一的答案怎么办,哪里有更好的方法?下面小编马上就告诉大家怎么做。ppt改变所有字…

判断颜色是否合法的正则表达式 |

判断颜色是否合法的正则表达式 |

正则表达式,详解,是否合法,颜色,电脑软件,"^#([0-9a-fA-F]{6}|[0-9a-fA-F]{3})$";意思是:以#开头,后面是数字和a-f的字符(大写或小写),这个值是6位或3位。要匹配一个3为是为了符合css颜色的简写规则:"#abc"=="#aabbcc"注意:如果需要进行16位…

怎么在word文档中设置批量打印奖状

怎么在word文档中设置批量打印奖状

文档,设置,奖状,批量,电脑软件,  在打印奖状的时候,发现奖状很多,而且还是不同种类的奖状,该怎么快速打印。以下是小编为您带来的关于word文档中设置批量打印奖状,希望对您有所帮助。word文档中设置批量打印奖状1、新建一张电子表格表单,把所…

JavaScript实现左右下拉框动态增删

JavaScript实现左右下拉框动态增删

下拉框,动态,示例,电脑软件,JavaScript,选中下拉框中的选项实现左移右移效果:1. Html部分代码<body><table align="center"> <tr> <td ><select size="15" id="left" > <option>左1</option> <option>左2</option> …

jQuery实现简单日期格式化功能示例

jQuery实现简单日期格式化功能示例

日期格式化,示例,简单,功能,电脑软件,本文实例讲述了jQuery实现简单日期格式化功能。分享给大家供大家参考,具体如下:代码如下,引入jquery后直接后加入以下代码刷新可测试Date.prototype.Format = function (fmt) { //author: meizz var o = …

如何制作PPT闪电效果动画

如何制作PPT闪电效果动画

动画,闪电,效果,电脑软件,PPT,  用PPT动画模拟闪电的情况,在开始做动画之前,我们还得找一些素材,主要就是闪电的图片,以黑底最佳,有个七八张就OK。以下是小编为您带来的关于PPT闪电效果动画的制作,希望对您有所帮助。PPT闪电效果动画的制作1、…

怎么批量在Excel表格中插入多列行

怎么批量在Excel表格中插入多列行

多列,批量,表格,电脑软件,Excel,  在Excel表格的使用中,插入行列这个操作,简单的做法很多人都会。如果要在Excel表格内容之间插入多列行,那该如何去批量插入?以下是小编为您带来的关于批量在Excel表格中插入多列行,希望对您有所帮助。批量在E…

wps文档里面怎么设置内部超链接wps

wps文档里面怎么设置内部超链接wps

文档,设置,超链接,方法,步骤,  日常工作中,处理文档和制作文档的时候,很多时候都会涉及到内部文件不同部分的超链接。那么要怎么做呢?下面小编告诉你wps文档设置内部超链接的方法。希望对你有帮助!wps文档里面设置内部超链接的步骤首先,我们…

word2013使用审阅功能的两种方法

word2013使用审阅功能的两种方法

方法,功能,两种,电脑软件,strong,  用户在使用Word2013编辑文档时,有时可能会发现&ldquo;审阅&rdquo;选项卡不显示了。其实Word2013功能区中的选项卡可以自定义显示或不显示,那么下面就由小编给大家分享下word2013使用审阅功能的技巧,希望能…