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 相关文章推荐
Highcharts 非常实用的Javascript统计图demo示例
Jul 03 Javascript
JavaScript DOM 编程艺术(第2版)读书笔记(JavaScript的最佳实践)
Oct 01 Javascript
利用js判断浏览器类型(是否为IE,Firefox,Opera浏览器)
Nov 22 Javascript
express的中间件bodyParser详解
Dec 04 Javascript
JQuery radio(单选按钮)操作方法汇总
Apr 15 Javascript
JS基于cookie实现来宾统计记录访客信息的方法
Aug 04 Javascript
Mac下使用charles遇到的问题以及解决办法
Jan 10 Javascript
详解使用nvm安装node.js
Jul 18 Javascript
Angular项目从新建、打包到nginx部署全过程记录
Dec 09 Javascript
解决在layer.open中使用时间控件laydate失败的问题
Sep 11 Javascript
JQuery表单元素取值赋值方法总结
May 12 jQuery
react antd实现动态增减表单
Jun 03 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访问MYSQL数据库封装类(附函数说明)
2010/12/04 PHP
Android AsyncTack 异步任务实例详解
2016/11/02 PHP
yii框架redis结合php实现秒杀效果(实例代码)
2017/10/26 PHP
Laravel 实现添加多语言提示信息
2019/10/25 PHP
在JavaScript中遭遇级联表达式陷阱
2007/03/08 Javascript
按钮JS复制文本框和表格的代码
2011/04/01 Javascript
node中socket.io的事件使用详解
2014/12/15 Javascript
javaScript中with函数用法实例分析
2015/06/08 Javascript
jquery模拟进度条实现方法
2015/08/03 Javascript
javascript比较语义化版本号的实现代码
2016/09/09 Javascript
js判断是否为空和typeof的用法(详解)
2016/10/07 Javascript
微信小程序 登陆流程详细介绍
2017/01/17 Javascript
JS+HTML5实现图片在线预览功能
2017/07/22 Javascript
使用Vue开发动态刷新Echarts组件的教程详解
2018/03/22 Javascript
JavaScript设计模式之构造器模式(生成器模式)定义与用法实例分析
2018/07/26 Javascript
使用js实现一个简单的滚动条过程解析
2019/09/10 Javascript
jQuery实现轮播图源码
2019/10/23 jQuery
详解JavaScript 异步编程
2020/07/13 Javascript
python基础教程之popen函数操作其它程序的输入和输出示例
2014/02/10 Python
python检查指定文件是否存在的方法
2015/07/06 Python
python 安装virtualenv和virtualenvwrapper的方法
2017/01/13 Python
Python实现去除列表中重复元素的方法小结【4种方法】
2018/04/27 Python
python 字符串常用函数详解
2019/09/11 Python
python提取xml里面的链接源码详解
2019/10/15 Python
使用tkinter实现三子棋游戏
2021/02/25 Python
html5声频audio和视频video等新特性详细说明
2012/12/26 HTML / CSS
使用HTML5进行SVG矢量图形绘制的入门教程
2016/02/19 HTML / CSS
芬兰汽车配件商店:Autonvaraosat24
2017/01/30 全球购物
应届生自我鉴定
2013/12/11 职场文书
聊城大学毕业生自荐书
2014/02/01 职场文书
社会实践先进工作者事迹材料
2014/05/06 职场文书
法人任命书范本
2014/06/04 职场文书
经理任命书模板
2014/06/06 职场文书
助学金感谢信
2015/01/20 职场文书
PyQt5爬取12306车票信息程序的实现
2021/05/14 Python
Spark SQL 2.4.8 操作 Dataframe的两种方式
2021/10/16 SQL Server