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


Posted in Javascript onJanuary 21, 2017

本文实例讲述了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程序设计有所帮助。

Javascript 相关文章推荐
javascript new fun的执行过程
Aug 05 Javascript
jQuery渐变发光导航菜单的实例代码
Mar 27 Javascript
解析js中获得父窗口链接getParent方法以及各种打开窗口的方法
Jun 19 Javascript
通过js获取div的background-image属性
Oct 15 Javascript
jQuery事件的绑定、触发、及监听方法简单说明
May 10 Javascript
JS ES6中setTimeout函数的执行上下文示例
Apr 27 Javascript
基于Vue2.0+ElementUI实现表格翻页功能
Oct 23 Javascript
Vue中使用matomo进行访问流量统计的实现
Nov 05 Javascript
使用typescript改造koa开发框架的实现
Feb 04 Javascript
mapboxgl区划标签避让不遮盖实现的代码详解
Jul 01 Javascript
vue 里面的 $forceUpdate() 强制实例重新渲染操作
Sep 21 Javascript
js观察者模式的弹幕案例
Nov 23 Javascript
微信小程序 九宫格实例代码
Jan 21 #Javascript
AngularJS的ng-repeat指令与scope继承关系实例详解
Jan 21 #Javascript
巧用canvas
Jan 21 #Javascript
javascript阻止事件冒泡和浏览器的默认行为
Jan 21 #Javascript
js验证手机号、密码、短信验证码代码工具类
Jun 24 #Javascript
微信小程序 swiper制作tab切换实现附源码
Jan 21 #Javascript
微信小程序之拖拽排序(代码分享)
Jan 21 #Javascript
You might like
PHP数组的交集array_intersect(),array_intersect_assoc(),array_inter_key()函数的小问题
2011/05/29 PHP
浅谈PHP强制类型转换,慎用!
2013/06/06 PHP
从零开始学YII2框架(三)扩展插件yii2-gird
2014/08/20 PHP
php实现scws中文分词搜索的方法
2015/12/25 PHP
PHP+MySQL统计该库中每个表的记录数并按递减顺序排列的方法
2016/02/15 PHP
JSON字符串传到后台PHP处理问题的解决方法
2016/06/05 PHP
PDO::rollBack讲解
2019/01/29 PHP
php反序列化长度变化尾部字符串逃逸(0CTF-2016-piapiapia)
2020/02/15 PHP
php使用Swoole实现毫秒级定时任务的方法
2020/09/04 PHP
Gambit vs CL BO3 第二场 2.13
2021/03/10 DOTA
javascript call和apply方法
2008/11/24 Javascript
JS特权方法定义作用以及与公有方法的区别
2013/03/18 Javascript
JS 实现列表与多选框选择附预览动画
2014/10/29 Javascript
NodeJs的优势和适合开发的程序
2016/08/14 NodeJs
Javascript数组中push方法用法分析
2016/10/31 Javascript
JavaScript 数组的进化与性能分析
2017/09/18 Javascript
基于Bootstrap表单验证功能
2017/11/17 Javascript
javascript+css3开发打气球小游戏完整代码
2017/11/28 Javascript
原生jQuery实现只显示年份下拉框
2020/12/24 jQuery
python3 模拟登录v2ex实例讲解
2017/07/13 Python
matplotlib实现区域颜色填充
2019/03/18 Python
python实现月食效果实例代码
2019/06/18 Python
Python: 传递列表副本方式
2019/12/19 Python
利用django创建一个简易的博客网站的示例
2020/09/29 Python
CSS3使用transition属性实现过渡效果
2018/04/18 HTML / CSS
英国蛋糕装饰用品一站式商店:Craft Company
2019/03/18 全球购物
澳大利亚优质的家居用品和生活方式公司:Bed Bath N’ Table
2019/04/16 全球购物
Dogeared官网:在美国手工制作的珠宝
2019/08/24 全球购物
Currentbody法国:健康与美容高科技产品
2020/08/16 全球购物
办公室年终个人自我评价
2013/10/28 职场文书
个人党性剖析材料
2014/02/03 职场文书
犯错检讨书
2014/02/21 职场文书
《四季》教学反思
2014/04/08 职场文书
听证会主持词
2015/07/03 职场文书
请学会珍惜眼前,因为人生没有下辈子!
2019/11/12 职场文书
win11无法登录onedrive错误代码0x8004def7怎么办 ?
2022/04/05 数码科技