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>

  

  

时间: 2024-11-13 17:59:06

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

(十二)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> <h

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

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

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

通常大家在使用ng中的指令的时候,用的链接函数最多的是link属性,下面这篇文章将告诉大家complie,pre-link,post-link的用法与区别. 原文地址 angularjs里的指令非常神奇,允许你创建非常语义化以及高度重用的组件,可以理解为web components的先驱者. 网上已经有很多介绍怎么使用指令的文章以及相关书籍,相互比较的话,很少有介绍compile与link的区别,更别说pre-link与post-link了. 大部分教程只是简单的说下compile会在ng内部用

angularjs在指令中使用子作用域引申出的‘值复制’与‘引用复制’的问题

<!DOCTYPE html> <html lang="zh-CN" ng-app="app"> <head> <meta charset="utf-8"> <title>在指令中使用子作用域</title> <link rel="stylesheet" href="../bootstrap.min.css"> </h

AngularJS指令中的compile与link函数解析

AngularJS指令中的compile与link函数解析 通常大家在使用ng中的指令的时候,用的链接函数最多的是link属性,下面这篇文章将告诉大家complie,pre-link,post-link的用法与区别. 原文地址 angularjs里的指令非常神奇,允许你创建非常语义化以及高度重用的组件,可以理解为web components的先驱者. 网上已经有很多介绍怎么使用指令的文章以及相关书籍,相互比较的话,很少有介绍compile与link的区别,更别说pre-link与post-lin

angularjs指令中的compile详解

篇文章主要介绍了angularjs指令中的compile与link函数详解,本文同时诉大家complie,pre-link,post-link的用法与区别等内容,需要的朋友可以参考下 通常大家在使用ng中的指令的时候,用的链接函数最多的是link属性,下面这篇文章将告诉大家complie,pre-link,post-link的用法与区别. angularjs里的指令非常神奇,允许你创建非常语义化以及高度重用的组件,可以理解为web components的先驱者. 网上已经有很多介绍怎么使用指令的

angularjs指令中的compile与link函数详解补充

通常大家在使用ng中的指令的时候,用的链接函数最多的是link属性,下面这篇文章将告诉大家complie,pre-link,post-link的用法与区别. angularjs里的指令非常神奇,允许你创建非常语义化以及高度重用的组件,可以理解为web components的先驱者. 网上已经有很多介绍怎么使用指令的文章以及相关书籍,相互比较的话,很少有介绍compile与link的区别,更别说pre-link与post-link了. 大部分教程只是简单的说下compile会在ng内部用到,而且建

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

这篇文章主要介绍了angularjs指令中的compile与link函数详解,本文同时诉大家complie,pre-link,post-link的用法与区别等内容,需要的朋友可以参考下 通常大家在使用ng中的指令的时候,用的链接函数最多的是link属性,下面这篇文章将告诉大家complie,pre-link,post-link的用法与区别. angularjs里的指令非常神奇,允许你创建非常语义化以及高度重用的组件,可以理解为web components的先驱者. 网上已经有很多介绍怎么使用指令

angular js权威指南笔记三--向指令中传递数据

给指令添加属性,这个属性会成为指令内部作用域的属性 有好几种途径可以设置指令内部作用域中属性的值.最简单的方法就是使用由所属控制器提供的已经存在的作用域. 但是会导致很多其他问题.如果控制器被移除,或者在控制器的作用域中也定义了一个叫 相同的属性名,我们就被迫要修改代码 AngularJS 允许通过创建新的子作用域或者隔离作用域来解决这个常见问题 <div my-directive some-property="someProperty with @ binding">&l