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 相关文章推荐
基于jQuery的ajax功能实现web service的json转化
Aug 29 Javascript
jquery增加时编辑jqGrid(实例代码)
Nov 08 Javascript
jQuery解析XML与传统JavaScript方法的差别实例分析
Mar 05 Javascript
text-align:justify实现文本两端对齐 兼容IE
Aug 19 Javascript
Window.Open打开窗体和if嵌套代码
Apr 15 Javascript
Angular ng-repeat指令实例以及扩展部分
Dec 26 Javascript
javascript实现简单的ajax封装示例
Dec 28 Javascript
在点击div中的p时,如何阻止事件冒泡
Feb 07 Javascript
原生JS京东轮播图代码
Mar 22 Javascript
JS实现获取汉字首字母拼音、全拼音及混拼音的方法
Nov 14 Javascript
bootstrap table实现iview固定列的效果实例代码详解
Sep 30 Javascript
原生js+css实现tab切换功能
Sep 17 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
vs中通过剪切板循环来循环粘贴不同内容
2011/04/30 PHP
PHP fgetcsv 定义和用法(附windows与linux下兼容问题)
2012/05/29 PHP
PHP session文件独占锁引起阻塞问题解决方法
2015/05/12 PHP
兼容IE与firefox火狐的回车事件(js与jquery)
2010/10/20 Javascript
纯js实现背景图片切换效果代码
2010/11/14 Javascript
调用jQuery滑出效果时闪烁的解决方法
2014/03/27 Javascript
jquery加载图片时以淡入方式显示的方法
2015/01/14 Javascript
JS组件Form表单验证神器BootstrapValidator
2016/01/26 Javascript
JS定义类的六种方式详解
2016/05/12 Javascript
bootstrap和jQuery.Gantt的css冲突 如何解决
2016/05/29 Javascript
JavaScript中自带的 reduce()方法使用示例详解
2016/08/10 Javascript
基于BootStrap与jQuery.validate实现表单提交校验功能
2016/12/22 Javascript
深入理解Angularjs中的$resource服务
2016/12/31 Javascript
vue resource post请求时遇到的坑
2017/10/19 Javascript
详解Nuxt.js Vue服务端渲染摸索
2018/02/08 Javascript
详解redux异步操作实践
2018/08/15 Javascript
Vue动态获取width的方法
2018/08/22 Javascript
Cordova(ionic)项目实现双击返回键退出应用
2019/09/17 Javascript
原生JS实现萤火虫效果
2020/03/07 Javascript
python使用socket向客户端发送数据的方法
2015/04/29 Python
CentOS 6.X系统下升级Python2.6到Python2.7 的方法
2016/10/12 Python
Python实现简易版的Web服务器(推荐)
2018/01/29 Python
python正则表达式爬取猫眼电影top100
2018/02/24 Python
对Python中Iterator和Iterable的区别详解
2018/10/18 Python
如何使用python把ppt转换成pdf
2019/06/29 Python
PyCharm2020.1.1与Python3.7.7的安装教程图文详解
2020/08/07 Python
HTML5 WebGL 实现民航客机飞行监控系统
2019/07/25 HTML / CSS
Volcom英国官方商店:美国殿堂级滑板、冲浪、滑雪服装品牌
2019/03/13 全球购物
Spartoo美国:欧洲排名第一的在线时装零售商
2019/12/12 全球购物
薇姿法国官网:Vichy法国
2021/01/28 全球购物
高级护理专业毕业生推荐信
2013/12/25 职场文书
置业顾问岗位职责
2015/02/09 职场文书
2015年信访工作总结
2015/04/07 职场文书
年会邀请函的格式及范文五篇
2019/11/02 职场文书
Go语言设计模式之结构型模式
2021/06/22 Golang
详解CSS中的特指度和层叠问题
2021/07/15 HTML / CSS