ng-repeat 中的track by
<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的更多相关文章
- 走进AngularJs(二) ng模板中常用指令的使用方式
通过使用模板,我们可以把model和controller中的数据组装起来呈现给浏览器,还可以通过数据绑定,实时更新视图,让我们的页面变成动态的.ng的模板真是让我爱不释手.学习ng道路还很漫长,从模板 ...
- AngularJs使用过程中,在ng-repeat中使用track by
1.问题描述: 点击删除后:table中的被选中设备确实被删除了,但是data-table并没有重新加载出来, 查看js代码: 先对$scope.data_table进行了destroy(),然后重新 ...
- ng-repeat 中的 track by $index
用ng-repeat指令遍历一个javascript数组,当数组中有重复元素的时候,angularjs会报错,这是因为ng-Repeat不允许collection中存在两个相同Id的对象. 对于数字或 ...
- ng-repeat指令中使用track by子语句解决重复数据遍历的错误
用ng-repeat指令遍历一个javascript数组,当数组中有重复元素的时候,angularjs会报错,这是因为ng-Repeat不允许collection中存在两个相同Id的对象. 对于数字或 ...
- 必须正确理解的---ng指令中的compile与link函数解析
这个绝对是深入的知识,但看完之后,对NG的理解就很利害啦. http://www.ifeenan.com/angularjs/2014-09-04-%5B%E8%AF%91%5DNG%E6%8C%87 ...
- ng事件中为变量的参数
之前学习Angular时碰到过这种问题,绑定事件中传参为变量的问题. 举个例子吧,比如有这么一段代码: <button type='button' ng-click="showMsg( ...
- [译]ng指令中的compile与link函数解析 转
通常大家在使用ng中的指令的时候,用的链接函数最多的是link属性,下面这篇文章将告诉大家complie,pre-link,post-link的用法与区别. 原文地址 angularjs里的指令非常神 ...
- repeat 中的 continue
repeat a := -; then ShowMessage('') else begin Caption := ''; Continue;//不是立即 向上 返回 执行,要先向下 检查循环条件 是 ...
- 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 ...
随机推荐
- (转)Illustrated: Efficient Neural Architecture Search ---Guide on macro and micro search strategies in ENAS
Illustrated: Efficient Neural Architecture Search --- Guide on macro and micro search strategies in ...
- Gridview标题头添加排序图片
向gridview标题头中添加排序图片,当点击某一个头标题时,在标题中出现升序箭头向上的图片,再点击一次时降序,在标题中出现箭头向下的图片,初始页面时在标题头中并不现实任何图片. 先定义好一个grid ...
- Nginx1.14.0+ModSecurity实现简单的WAF
一.编译安装Nginx 1.安装依赖环境 $ yum -y install gcc-c++ flex bison yajl yajl-devel curl-devel curl GeoIP-devel ...
- Maven工程的POM继承
父POM的作用是消除配置的重复. 父POM必须<packaging>pom</packaging>. 还有 <modules> <module>子模块1 ...
- webpack dllPlugin使用(基于vue-cli webpack模板)
由于本例单入口时打包的文件体积过大,将其分成多入口. 主要涉及到的几个文件为: /index.html, /webpack.dll.config.js, /build/webpack.base.con ...
- Web 前端技术图谱-菜鸟教程
- 高阶函数 map、reduce、filter、sort 函数计算
map() 循环遍历,返回一个新数组 ,reduce()把结果继续和序列的下一个元素做累积计算 把一个字符串13579先变成Array--[1, 3, 5, 7, 9],再利用reduce()就可以写 ...
- 从vue源码看props
前言 平时写vue的时候知道props有很多种用法,今天我们来看看vue内部是怎么处理props中那么多的用法的. vue提供的props的用法 1. 数组形式 props: ['name', 'va ...
- [Linux]防火墙关闭与开启
防火墙关闭与开启 系统环境:ubuntu16.04 工具:xshell 测试远程主机的端口是否开启 telnet 192.168.xx.xx 80 防火墙关闭/开启/重启 # 防火墙关闭 sudo u ...
- 接口测试工具Jmeter
一.安装Jmeter 1.安装JDK ①下载jdk,到官网下载jdk,地址:http://jmeter.apache.org/download_jmeter.cgi ② 安装jdk(Oracle官网下 ...