用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}];

  1. var myapp=angular.module('myapp',[]);
  2. myapp.controller('test',function($scope){
  3. $scope.arr=['aa','bb','cc','dd','cc']
  4. $scope.obj=[{'name':'same'},{'name':'same'},{'name':'same'},{'name':'same'},{'name':'same'}]
  5. });
  6.  
  7. <div ng-app="myapp" ng-controller="test">
  8. <ol>
  9. <li ng-repeat="x in arr track by $index">
  10. <p ng-if="x=='aa'">{{x}}</p>
  11.  
  12. <p ng-if="x=='bb'">{{x}}</p>
  13.  
  14. <p ng-if="x=='cc'">{{x}}</p>
  15.  
  16. <p ng-if="x=='dd'">{{x}}</p>
  17. </li>
  18. </ol>
  19.  
  20. <ol>
  21. <li ng-repeat="y in obj" ng-switch on="y.name">
  22. <p ng-switch-when="same">{{y}}</p>
  23. </li>
  24. </ol>
  25. </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 schedule

    spring-scheduler.xml文件内容如下: <?xml version="1.0" encoding="UTF-8"?><bean ...

  2. 【宽度优先搜索】神奇的状态压缩 CodeVs1004四子连棋

    一.写在前面 其实这是一道大水题,而且还出在了数据最水的OJ上,所以实际上这题并没有什么难度.博主写这篇blog主要是想写下一个想法--状态压缩.状态压缩在记录.修改状态以及判重去重等方面有着极高的( ...

  3. SQL Server书籍整理

    1.<Microsoft SQL Server企业级平台管理实践>徐海蔚2.<SQL Server 2005 Performance Tuning性能调校>胡百敬3.<M ...

  4. python os模块(1)

    os模块主要处理文件和目录(文件夹)的创建.删除.检查判定.属性值修改.路径修改. (1)获取当前目录的两种方法 1 os.getcwd() os.path.abspath('.') (2)创建文件夹 ...

  5. Using User-Named Triggers in Oracle Forms

    A user-named trigger is a trigger defined in a form by the developer. User-Named triggers do not aut ...

  6. WebSocket实战之————GatewayWorker使用笔记例子

    参考文档:http://www.workerman.net/gatewaydoc/ 目录结构 ├── Applications // 这里是所有开发者应用项目 │ └── YourApp // 其中一 ...

  7. (六)makefile编程

    最简单的makefile: all: gcc server.c -o ser gcc client.c  -o cli clear: rm ser cli *.o -rf  #rm -rf表示删除文件 ...

  8. News common vocabulary

    英语新闻常用词汇与短语 经济篇 accumulated deficit 累计赤字 active trade balance 贸易顺差 adverse trade balance 贸易逆差 aid 援助 ...

  9. 字符串与模式匹配(一)——KMP算法

    源码:kmp.cpp // KMP.cpp : Defines the entry point for the console application. // #include "stdaf ...

  10. JPA用myeclipse生成bean