<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. JXOJ(基于UOJ)部署日志

    JXOJ部署日志 前些日子协助cyc.llf两位奆老部署了JXOJ,为方便日后维护我校OJ的同学,写篇日志做记录以日后查看. 一.准备: ​ 在尝试了多个不同OJ之后,我们最终选择了Universal ...

  2. 修改vim的颜色主题 及显示行号

    1.打开vim窗口,输入命令:color 或者colorscheme后回车查看当前颜色主题. 2. 输入:colorscheme <主题> 即可设置当前vim的颜色主题. sample: ...

  3. android 百度地图 定位获取位置失败 62错误

    一切正常步骤进行但是还是没有获得定位,得到的坐标总是49E.xxxx,错误代码总是62 总是以为代码.或jar包.或还有什么权限没给.搞了好久,十分郁闷.在控制台上又没有什么具体的错误提示 经过无数次 ...

  4. git commit -m 提交的内容换行

    网上说只需要通过单引号来换行,一直没理解,后面终于试出来了.总结一句话就是. . 先输入第一个引号,按Enter即可换行,完成后再补齐后面的引号 // 步骤一: 输入第一行 git commit -m ...

  5. JVM-GC学习

    http://blog.csdn.net/column/details/14851.html   地址记录

  6. Python3中urllib模块的使用

    转载自:https://www.cnblogs.com/php-linux/p/8365941.html 1.基本方法 urllib.request.urlopen(url, data=None, [ ...

  7. DAY 24继承与组合

    一.继承 继承就是子类与父类形成的一种关系,可以让子类能直接从父类中获取属性与方法 优点:减少了类与类之间的代码冗余 语法: class 父类: # 父类是多个有共同点的普通类抽离共有属性与方法形成的 ...

  8. lua --- 表操作

    c api 参考手册:http://www.leeon.me/a/lua-c-api-manual // LuaTest.cpp : 定义控制台应用程序的入口点. // #include " ...

  9. 第 8 章 容器网络 - 072 - 一文搞懂各种 Docker 网络

    Docker 起初只提供了简单的 single-host 网络,显然这不利于 Docker 构建容器集群并通过 scale-out 方式横向扩展到多个主机上. 跨主机网络方案: Docker Over ...

  10. JS-NaN的数据类型

    NaN 的数据类型:not a number .是数字类型但是不是数字 例: var x = Number('abcd'); //结果是NaN alert( typeof (x) ); //结果是nu ...