<div  style="font-size:15px"ng-repeat="item in groups.items track by $index">
<span>{{$index+1}}.</span>
<span style="padding-left: 10px">{{item.name}}</span>
<input ng-disabled = "item.firstSelected" style="vertical-align: middle;float:right;margin-right: 10px;" type="checkbox" ng-model="item.selected">
</div>

界面如图

track by $index 根据遍历循环的索引 创建唯一键防止数组相同元素时报错

我们见到最简单的例子是:

1
<div   ng-repeat="link in links" ></div>

  

如果item的值有重复的,比如links=["1","1","2","2","3"]

那么angularjs 会报错,不允许值重复,原因是angular需要一个唯一值可以与生成的dom绑定,以便追踪.

然后这时候,track by的用处就体现出来了。

1
<div ng-repeat="(key,value) in links track by key"></div>

  key值是唯一的,这样就解决了

ng-repeat 中的track by的更多相关文章

  1. 走进AngularJs(二) ng模板中常用指令的使用方式

    通过使用模板,我们可以把model和controller中的数据组装起来呈现给浏览器,还可以通过数据绑定,实时更新视图,让我们的页面变成动态的.ng的模板真是让我爱不释手.学习ng道路还很漫长,从模板 ...

  2. AngularJs使用过程中,在ng-repeat中使用track by

    1.问题描述: 点击删除后:table中的被选中设备确实被删除了,但是data-table并没有重新加载出来, 查看js代码: 先对$scope.data_table进行了destroy(),然后重新 ...

  3. ng-repeat 中的 track by $index

    用ng-repeat指令遍历一个javascript数组,当数组中有重复元素的时候,angularjs会报错,这是因为ng-Repeat不允许collection中存在两个相同Id的对象. 对于数字或 ...

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

    用ng-repeat指令遍历一个javascript数组,当数组中有重复元素的时候,angularjs会报错,这是因为ng-Repeat不允许collection中存在两个相同Id的对象. 对于数字或 ...

  5. 必须正确理解的---ng指令中的compile与link函数解析

    这个绝对是深入的知识,但看完之后,对NG的理解就很利害啦. http://www.ifeenan.com/angularjs/2014-09-04-%5B%E8%AF%91%5DNG%E6%8C%87 ...

  6. ng事件中为变量的参数

    之前学习Angular时碰到过这种问题,绑定事件中传参为变量的问题. 举个例子吧,比如有这么一段代码: <button type='button' ng-click="showMsg( ...

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

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

  8. repeat 中的 continue

    repeat a := -; then ShowMessage('') else begin Caption := ''; Continue;//不是立即 向上 返回 执行,要先向下 检查循环条件 是 ...

  9. 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 ...

随机推荐

  1. select样式重置

                div{                 //用div的样式代替select的样式                 width: 200px;                 ...

  2. Git 与 GitHub 简介

    Git 与 GitHub 的来历 Linux 之父 Linus 在 1991 年创建开源的 Linux 操作系统之后,多年来依靠全世界广大热心志愿者的共同建设,经过长足发展,现已成为世界上最大的服务器 ...

  3. Docker跨主机网络联通之etcd实现

    搭建ETCD集群 查看NODE1机器IP,并启动ETCD ubuntu@docker-node1:~$ ifconfig eth0 eth0: flags=4163<UP,BROADCAST,R ...

  4. 使用RStudio调试(debug)基础学习(二)和fGarch包中的garchFit函数估计GARCH模型的原理和源码

    一.garchFit函数的参数--------------------------------------------- algorithm a string parameter that deter ...

  5. C#中得到程序当前工作目录和执行目录的五种方法

    string str="";str += "\r\n" + System.Diagnostics.Process.GetCurrentProcess().Mai ...

  6. HDU 1257 最少拦截系统(思路题)

    Problem Description 某国为了防御敌国的导弹袭击,发展出一种导弹拦截系统.但是这种导弹拦截系统有一个缺陷:虽然它的第一发炮弹能够到达任意的高度,但是以后每一发炮弹都不能超过前一发的高 ...

  7. MySQL 存储过程参数

    MySQL  存储过程参数 MySQL存储过程参数简介 在现实应用中,开发的存储过程几乎都需要参数.这些参数使存储过程更加灵活和有用. 在MySQL中,参数有三种模式:IN,OUT或INOUT. IN ...

  8. js转盘大抽奖 自定义概率

    公司项目搞优惠活动,让做一个转盘抽奖的活动,转盘抽奖让他转起来 按照概率停止其实都麻烦,但是概率如果设置在前端就会很大的安全漏洞,所以无论为了安全性还是后期的维护问题都要把概率写到后台配置里然后读取配 ...

  9. 【转载】Linux常用命令

    Linux常用命令大全(非常全!!!) 转载出处:https://www.cnblogs.com/yjd_hycf_space/p/7730690.html 系统信息 arch 显示机器的处理器架构( ...

  10. spring cloud(四)熔断器Hystrix

    熔断器 雪崩效应 在微服务架构中通常会有多个服务层调用,基础服务的故障可能会导致级联故障,进而造成整个系统不可用的情况,这种现象被称为服务雪崩效应.服务雪崩效应是一种因“服务提供者”的不可用导致“服务 ...