ng-repeat 之 track by $index

<ul>
       <li ng-repeat="item in items">{{item}}</li>
</ul>

以上代码报错:Error: [ngRepeat:dupes];这个出错提示具体到题主的情况,意思是指数组中有2个以上的相同数字。ngRepeat不允许collection中存在两个相同Id的对象

解决方案:

<ul>
    <li ng-repeat="item in items track by $index">{{item}}</li>
</ul>

对于数字对象来说,它的id就是它自身的值,因此,数组中是不允许存在两个相同的数字的。为了规避这个错误,需要定义自己的track by表达式。例如:item in items track by item.id或者item in items track by fnCustomId(item)。嫌麻烦的话,直接拿循环的索引变量$index来用item in items track by $index

时间: 2024-08-24 03:39:29

ng-repeat 之 track by $index的相关文章

AngularJS track by $index引起的思考

今天写了一段程序,只是一个简答的table数据绑定,但是绑定select的数据之后,发现ng-change事件失去了效果,不知道什么原因. 主要用到的代码如下: <div id="right" ng-app="myApp" ng-controller="targetControl"> <select ng-model="indexSelect" data-size="4" ng-optio

在angular中使用ng-repeat时数组中有重复元素,要用item in items track by $index

在angular中使用ng-repeat时数组中有重复元素,要用item in items track by $index,不然会报错 <div class="" ng-init="names=[1,2,3,4,5,5]"> <p>循环对象:</p> <ul> <li ng-repeat="x in names track by $index"> {{ x }}</li> &

Part 6 AngularJS ng repeat directive

ng-repeat is similar to foreach loop in C#. Let us understand this with an example. Here is what we want to do. 1. For each employee we have in the employees array we want a table row. With in each cell of the table row we to display employee Firstna

ng 实现插入和删除

结果: 代码: <!DOCTYPE html> <html ng-app="myApp"> <head lang="en"> <meta charset="UTF-8"> <script src="js/angular.js"></script> <title></title> </head> <body>

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

用ng-repeat指令遍历一个javascript数组,当数组中有重复元素的时候,angularjs会报错,这是因为ng-Repeat不允许collection中存在两个相同Id的对象. 对于数字或者字符串等基本数据类型来说,它的id就是它自身的值.因此数组中是不允许存在两个相同的数字的.为了规避这个错误,需要定义自己的track by表达式. // 业务上自己生成唯一的iditem in items track by item.id //或者直接拿循环的索引变量$index来用item in

(十三)通过DOM事件DOMNodeRemoved,看ng-repeat的性能问题以及track by的作用

1.DOMNodeRemoved事件 DOMNodeRemoved事件这里不做过多介绍,有个大概的认识,会使用即可.如下代码给content对象注册了DOMNodeRemoved事件处理函数,当content下有子元素被删除的时候,就会触发DOMNodeRemoved事件. <script> window.onload = function(){ var dom = document.getElementById("content"); dom.addEventListen

[ngRepeat:dupes] Duplicates in a repeater are not allowed. Use &#39;track by&#39; expression to specify unique keys

错误原因在于出现相同内容. 原写为: <li ng-repeat="log in logs" scroll-down> {{log}}</li> 改写为: <li ng-repeat="log in logs track by $index" scroll-down> {{log}}</li> 加track by $index即可解决. [ngRepeat:dupes] Duplicates in a repeater

在ng中的select的使用方法的讲解

项目中我们可能会使用到条件过滤选择框之类的东西,最简单的就是input.select. 关于select的使用我们通常会需要从数据库中返回数据进行动态绑定. 此时我们会有两种方式: 1)使用ng-repeat进行循环 <select class="textStyle my-input" ng-model="submitData.single_select[$index].befTil" name="title"> <option

ng-repeat出现环路输出Duplicates in a repeater are not allowed. Use &amp;#39;track by&amp;#39; expression to specify unique

采用ng-repeat循环发生错误时,如下面的输出对象: Duplicates in a repeater are not allowed. Use 'track by' expression to specify unique keys. Repeater: c in shopCount, Duplicate key: undefined:undefined 应该在循环是加下面代码    ng-repeat item in items track by $index 版权声明:本文博主原创文章