用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. 【Spring】利用Spring最简单地使用异步方法

    有时候我们想异步地调用某个方法. 比如这个场景:在业务处理完毕后,需给用户发送通知邮件.由于邮件发送需调用邮箱服务商,有可能发生阻塞,我们就可以异步调用.当然有个前提,即如果邮件发送失败,不需要提示用 ...

  2. [问题2014A07] 解答

    [问题2014A07]  解答 我们分三步进行证明. \(1^\circ\) 先证 \(\alpha_1,\alpha_2\) 线性无关. 用反证法, 设 \(\alpha_1,\alpha_2\) ...

  3. String和string的区别

    (1)从位置讲 1.string是c#中的的 2.String是 .Net Framework的一个函数名(类),基于using.System的引用 (2)从性质讲 1.string是关键字,Stri ...

  4. vs2012编译Qwt

    主题:vs2012编译Qwt ------------------------------------------------------------------------- 参照网络地址: htt ...

  5. 学习mongo系列(一) win/mac安装 解析 连接

    一.安装mongo数据库 下载链接https://www.mongodb.org/downloads, 在执行如下命令的时候事先按照目录新建如下的目录:(如果数据库安装在D盘就在D盘的根目录下建)&q ...

  6. window打开服务的dos命令

    window打开服务的dos命令   “开始”---> “运行”输入以下命令,或者Win + R,输入以下命令 对我比较有用的几个: 10. notepad--------打开记事本  31. ...

  7. Linux 1

    1. 使用虚拟控制台  登录后按Alt+F2键这时又可以看到"login:"提示符, 这个就是第二个虚拟控制台. 一般新安装的Linux有四个虚拟控制台, 可以用Alt+F1~Al ...

  8. asp.net页面跳转sessionid会变

    今天发现在一个Asp.net站点中, 同一次登录, 不停刷新页面或者页面跳转, 此时后台Session的SessionID总是变化的. 创建一个页面,添加一个button,后台代码非常简单,如下   ...

  9. UE3:SkeletalMesh的绘制流程

    [目标] SkeletalMesh的绘制流程 [思路] 1 顶点缓冲流 静态数据流向 动态数据流向(紫红色箭头) 2 FGPUSkinVertexFactory.ShaderDataType.Bone ...

  10. FileUpload V2.1详细

    Uploadify是JQuery的一个上传插件,实现的效果非常不错,带进度显示.不过官方提供的实例时php版本的,本文将详细介绍Uploadify在Aspnet中的使用,您也可以点击下面的链接进行演示 ...