ng-repeat指令中使用track by子语句解决重复数据遍历的错误
用ng-repeat指令遍历一个javascript数组,当数组中有重复元素的时候,angularjs会报错,这是因为ng-Repeat不允许collection中存在两个相同Id的对象。
对于数字或者字符串等基本数据类型来说,它的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}];
var myapp=angular.module('myapp',[]);
myapp.controller('test',function($scope){
$scope.arr=['aa','bb','cc','dd','cc']
$scope.obj=[{'name':'same'},{'name':'same'},{'name':'same'},{'name':'same'},{'name':'same'}]
});
<div ng-app="myapp" ng-controller="test">
<ol>
<li ng-repeat="x in arr track by $index">
<p ng-if="x=='aa'">{{x}}</p>
<p ng-if="x=='bb'">{{x}}</p>
<p ng-if="x=='cc'">{{x}}</p>
<p ng-if="x=='dd'">{{x}}</p>
</li>
</ol>
<ol>
<li ng-repeat="y in obj" ng-switch on="y.name">
<p ng-switch-when="same">{{y}}</p>
</li>
</ol>
</div>
ng-repeat指令中使用track by子语句解决重复数据遍历的错误的更多相关文章
- React中父组件与子组件之间的数据传递和标准化的思考
React中父组件与子组件之间的数据传递的的实现大家都可以轻易做到,但对比很多人的实现方法,总是会有或多或少的差异.在一个团队中,这种实现的差异体现了每个人各自的理解的不同,但是反过来思考,一个团队用 ...
- 手把手教你如何用java8新特性将List中按指定属性排序,过滤重复数据
在java中常常会遇到这样一个问题,在实际应用中,总会碰到对List排序并过滤重复的问题,如果List中放的只是简单的String类型过滤so easy,但是实际应用中并不会这么easy,往往List ...
- json对象中根据主键判断是否有重复数据
function funCheckRepeat() { var ids = $(gridId).jqGrid('getGridParam', 'selarrrow'); if (ids.length ...
- weex中css不能使用子元素选择器
weex中css不能使用子元素选择器 刚入手可能会有错误,有误导地方请谅解,不过都是亲身踩坑
- [译]ng指令中的compile与link函数解析 转
通常大家在使用ng中的指令的时候,用的链接函数最多的是link属性,下面这篇文章将告诉大家complie,pre-link,post-link的用法与区别. 原文地址 angularjs里的指令非常神 ...
- AngularJs -- 指令中使用子作用域
下面将要介绍的指令会以父级作用域为原型生成子作用域.这种继承的机制可以创建一个隔离层,用来将需要协同工作的方法和数据模型对象放置在一起. ng-app和ng-controller是特殊的指令,因为它们 ...
- angularjs指令中的compile与link函数详解(转)
http://www.jb51.net/article/58229.htm 通常大家在使用ng中的指令的时候,用的链接函数最多的是link属性,下面这篇文章将告诉大家complie,pre-link, ...
- 【转】angularjs指令中的compile与link函数详解
这篇文章主要介绍了angularjs指令中的compile与link函数详解,本文同时诉大家complie,pre-link,post-link的用法与区别等内容,需要的朋友可以参考下 通常大家在 ...
- angularjs指令中的compile与link函数详解
这篇文章主要介绍了angularjs指令中的compile与link函数详解,本文同时诉大家complie,pre-link,post-link的用法与区别等内容,需要的朋友可以参考下 通常大家在 ...
随机推荐
- 解决打开CHM文件后,右侧空白
在网上下了一个chm的文件,打开后只有目录,右侧不显示内容. 不知道是文件有问题,还是系统有问题. <ignore_js_op> 右键点击文件–属性 看到 最下面有一个提示 说是这个文件是 ...
- iOS - Mac 锁屏快捷键设置
Mac 锁屏快捷键设置 control + shift + Eject 锁屏快捷键 如果用户要离开电脑一段时间,可以选择直接把笔记本直接合上.但是这样原先在跑的进程就会挂起或者结束,如果正在下载,那么 ...
- M1卡介绍
本文整理自网络. M1卡是指菲利浦下属子公司恩智浦出品的芯片缩写,全称为NXP Mifare1系列,常用的有S50及S70两种型号,目前都有国产芯片与其兼容,属于非接触式IC卡.最为重要的优点是可读可 ...
- Material Design风格的水波涟漪效果(Ripple Effect)的实现
Material Design是Google在2014年Google I/O大会上推出的一套全新的设计语言,经过接近两年的发展,可谓是以燎原之势影响着整个设计交互生态,和Material Design ...
- windows递归拷贝(或删除等操作)文件
SHFileOperation 以拷贝为例. CString strFrom = ....._T("src");CString strTo = ....._T("dest ...
- php注意事项2
1.不要使用相对路径 常常会看到: require_once('../../lib/some_class.php'); 该方法有很多缺点: 它首先查找指定的php包含路径, 然后查找当前目录. 因此会 ...
- windows下面安装casperjs
因为需要 就学习了一下casperjs,CasperJS是一个开源的导航脚本处理和测试工具,基于PhantomJS(前端自动化测试工具)编写.由于casperjs对PhantomJS的依赖性,所以需要 ...
- Python学习笔记之字符串
一.字符串格式化 >>> format="Hello,%s. %s enough for ya?" >>> values=('World','H ...
- Centos7 下配置mysql5.6主从复制实例(一主两从)
标签:mysql 数据库 原创作品,允许转载,转载时请务必以超链接形式标明文章 原始出处 .作者信息和本声明.否则将追究法律责任.http://8941355.blog.51cto.com/89313 ...
- mousedown(function(){ return false; })作用
mousedown(function(){ return false;}); 阻止浏览器的默认行为. 比如a你加个空连接,可能会在当前页跳转, 你加了这句,就可以阻止a跳转,然后只执行js函数的代 ...