用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子语句解决重复数据遍历的错误的更多相关文章

  1. React中父组件与子组件之间的数据传递和标准化的思考

    React中父组件与子组件之间的数据传递的的实现大家都可以轻易做到,但对比很多人的实现方法,总是会有或多或少的差异.在一个团队中,这种实现的差异体现了每个人各自的理解的不同,但是反过来思考,一个团队用 ...

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

    在java中常常会遇到这样一个问题,在实际应用中,总会碰到对List排序并过滤重复的问题,如果List中放的只是简单的String类型过滤so easy,但是实际应用中并不会这么easy,往往List ...

  3. json对象中根据主键判断是否有重复数据

    function funCheckRepeat() { var ids = $(gridId).jqGrid('getGridParam', 'selarrrow'); if (ids.length ...

  4. weex中css不能使用子元素选择器

    weex中css不能使用子元素选择器 刚入手可能会有错误,有误导地方请谅解,不过都是亲身踩坑

  5. [译]ng指令中的compile与link函数解析 转

    通常大家在使用ng中的指令的时候,用的链接函数最多的是link属性,下面这篇文章将告诉大家complie,pre-link,post-link的用法与区别. 原文地址 angularjs里的指令非常神 ...

  6. AngularJs -- 指令中使用子作用域

    下面将要介绍的指令会以父级作用域为原型生成子作用域.这种继承的机制可以创建一个隔离层,用来将需要协同工作的方法和数据模型对象放置在一起. ng-app和ng-controller是特殊的指令,因为它们 ...

  7. angularjs指令中的compile与link函数详解(转)

    http://www.jb51.net/article/58229.htm 通常大家在使用ng中的指令的时候,用的链接函数最多的是link属性,下面这篇文章将告诉大家complie,pre-link, ...

  8. 【转】angularjs指令中的compile与link函数详解

    这篇文章主要介绍了angularjs指令中的compile与link函数详解,本文同时诉大家complie,pre-link,post-link的用法与区别等内容,需要的朋友可以参考下   通常大家在 ...

  9. angularjs指令中的compile与link函数详解

    这篇文章主要介绍了angularjs指令中的compile与link函数详解,本文同时诉大家complie,pre-link,post-link的用法与区别等内容,需要的朋友可以参考下   通常大家在 ...

随机推荐

  1. 深入对比数据科学工具箱:Python和R之争

    建议:如果只是处理(小)数据的,用R.结果更可靠,速度可以接受,上手方便,多有现成的命令.程序可以用.要自己搞个算法.处理大数据.计算量大的,用python.开发效率高,一切尽在掌握. 概述 在真实的 ...

  2. EFS解密----未重装系统

    一种方法.(手动删除私钥测试通过) 利用软件advanced efs data recovery 二种方法. 前提:在系统未重装或私钥未丢失.两个软件: PsExec和  IceSword.前者是国外 ...

  3. EasyUI关于 numberbox,combobox,validatebox 的几个小问题

    在最近的项目中,首次使用到了 网页的一个布局框架——EasyUI,感觉这个框架特别牛,兼容性很不错,页面效果也挺不错,可是在使用标题上三个控件过程中遇到几个很奇特的问题,让我头疼不已,所以在此给广大I ...

  4. [Python爬虫]cnblogs博客备份工具(可扩展成并行)

    并发爬虫小练习. 直接粘贴到本地,命名为.py文件即可运行,运行时的参数为你想要爬取的用户.默认是本博客. 输出是以用户名命名的目录,目录内便是博客内容. 仅供学习python的多线程编程方法,后续会 ...

  5. MXNet 学习 (1) --- 最易上手的深度学习开源库 --- 安装及环境搭建

    安装环境:Win 10 专业版 64位 + Visual Studio 2015 Community. 记录下自己在有GPU的环境下安装配置MXNet的过程.该过程直接使用MXNet release ...

  6. JAVA 使用POI导出数据格式为Execl

    需要下载一个poi的jar包. 控制器 @Override public void getContractListExecl(Contract contract, BindingResult resu ...

  7. Jqplot 使用总结之一(线条及节点颜色)

    好不容易抽出时间将Jqplot做下最后的总结,下面通过四个例子来学习Jqplot的一些常见技巧:示例1. 设置线条颜色(包括背景色及线条颜色的批量赋值) <!DOCTYPE html> & ...

  8. BLAST - 序列数据库搜索

    我生信入门,老师就要求我学好blast比对,说得也确实是很有道理,是个人都知道比对是最基本的东西,现在再想想那老师的建议,也只能呵呵一笑. 北大生物信息公开课有一章专门讲得序列数据库搜索,可以好好看看 ...

  9. hello word

    开通微博,用于记录在工作中遇到的点滴问题. 2015/08/31

  10. windows防火墙命令详解

    Old command 针对win7以下版本<包含win7> Example 1: 启用一个程序 Old command New command netsh firewall add al ...