(十二)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}];



时间: 2024-10-11 17:14:12

(十二)ng-repeat指令中使用track by子语句解决重复数据遍历的错误的相关文章

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

用ng-repeat指令遍历一个javascript数组,当数组中有重复元素的时候,angularjs会报错,这是因为ng-Repeat不允许collection中存在两个相同Id的对象. 对于数字或者字符串等基本数据类型来说,它的id就是它自身的值.因此数组中是不允许存在两个相同的数字的.为了规避这个错误,需要定义自己的track by表达式. // 业务上自己生成唯一的iditem in items track by item.id //或者直接拿循环的索引变量$index来用item in

汇编入门学习笔记 (十二)—— int指令、port

疯狂的暑假学习之  汇编入门学习笔记 (十二)--  int指令.port 參考: <汇编语言> 王爽 第13.14章 一.int指令 1. int指令引发的中断 int n指令,相当于引发一个n号中断. 运行过程相当于: (1)取中断类型吗n. (2)标志寄存器入栈:设置IF=0,TF=0. (3)CS.IP入栈 (4)(IP)=(n*4),(CS)=(n*4+2) 样例1:编写.安装中断7ch.实现求一个word型数据的平方,用ax存放这个数据. assume cs:code code s

汇编入门学习笔记 (十二)—— int指令、端口

疯狂的暑假学习之  汇编入门学习笔记 (十二)--  int指令.端口 参考: <汇编语言> 王爽 第13.14章 一.int指令 1. int指令引发的中断 int n指令,相当于引发一个n号中断. 执行过程相当于: (1)取中断类型吗n. (2)标志寄存器入栈:设置IF=0,TF=0. (3)CS,IP入栈 (4)(IP)=(n*4),(CS)=(n*4+2) 例子1:编写.安装中断7ch,实现求一个word型数据的平方,用ax存放这个数据. assume cs:code code seg

SQL Server 2008空间数据应用系列十二:Bing Maps中呈现GeoRSS订阅的空间数据

原文:SQL Server 2008空间数据应用系列十二:Bing Maps中呈现GeoRSS订阅的空间数据 友情提示,您阅读本篇博文的先决条件如下: 1.本文示例基于Microsoft SQL Server 2008 R2调测. 2.具备 Transact-SQL 编程经验和使用 SQL Server Management Studio 的经验. 3.熟悉或了解Microsoft SQL Server 2008中的空间数据类型. 4.具备相应(比如OGC规范.KML规范)的GIS专业理论知识.

Egret入门学习日记 --- 第二十二篇(书中 9.7~9.8 节 内容)

第二十二篇(书中 9.7~9.8 节 内容) 开始 9.7节 内容. 重点: 1.进度条ProgressBar的声明和使用. 操作: 1.进度条ProgressBar的声明和使用. 现在真的轻车熟路了,很简单.无非就是设置一下最大值,当前值的属性. 然后,事件监听的话,也是一样的.只不过事件名字的话,我就选书中这个事件吧. 可惜不能发动图,不然你们就可以看到这个进度条,每帧+1的速度前进. 当然,如果你想换自定义皮肤,还是老规矩,去找默认的 EXML 文件. 然后,怎么换素材,就按照自己喜欢的换

手把手教你如何用java8新特性将List中按指定属性排序,过滤重复数据

在java中常常会遇到这样一个问题,在实际应用中,总会碰到对List排序并过滤重复的问题,如果List中放的只是简单的String类型过滤so easy,但是实际应用中并不会这么easy,往往List中放的是一个类,类中有多个属性,要过滤重复数据,而且这个重复数据要按自己指定的属性过滤,但是要想按照其它属性排序顺序过滤,所以要先排序一下,然后按照某个属性过滤. 实体类如下所示,大家只要创建下面的实体类,无需继承父类,大家不会注解式风格的话,请自行加上getter/setter方法. 首先看看gr

第二十二篇:C++中的多态机制

前言 封装性,继承性,多态性是面向对象语言的三大特性.其中封装,继承好理解,而多态的概念让许多初学者感到困惑.本文将讲述C++中多态的概念以及多态的实现机制. 什么是多态? 多态就是多种形态,就是许多情况下可以互换地使用基类型和派生类型的多种形态. 多态的实现 依赖于动态绑定机制. 动态绑定机制相关 动态绑定是函数实际参数和形式参数绑定的一种方式,它是指我们能够在函数接口中使用继承层次中任意类型的对象,无需关心对象的具体类型. 动态执行接口函数的对象参数的哪个函数得在程序实际执行的时候才能确定

第三十二课、Qt中的文件操作

一.Qt中的IO操作 1.Qt中IO操作的处理方式 (1).Qt通过统一的接口简化了文件与外部设备的操作方式 (2).Qt中的文件被看做是一种特殊的外部设备 (3).Qt中的文件操作与外部设备操作相同 2.IO操作中的关键函数接口 注意:IO操作的本质:连续存储空间的数据读写 3.Qt中IO设备类型 (1).顺序存储设备:只能从头开始顺序读写数据,不能指定数据的读写位置(串口) (2).随机存储设备:可以定位到任意位置进行数据读写(seek function函数)(文件) 4.Qt中IO设备 的

第五十二课、c++中的抽象类和接口

一.c++中的抽象类与纯虚函数 1.面向对象中抽象的概念 (1).现实中需要知道具体图形的类型才能求面积 (2).图形类只是概念上的类型,没有具体对象 2.面向对象中的抽象类 (1).可用于表示现实世界中的抽象概念 (2).是一种只能定义类型,而不能产生对象的类 (3).只能被继承并重写相关的函数 (4).直接特征是相关函数没有完整实现 3.c++中没有抽象类的概念 (1).c++通过纯虚函数实现抽象类 (2).纯虚函数是只定义原型的成员函数 (3).一个c++类中存在纯虚函数就成了抽象类 4.