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-option="s for s in indexs track by $index"
id="stIndex" class = "selectpicker show-trick form-controller" ng-change="onIndexChanged()">
</select>
<table>
<tr>
<th>版本名称</th>
<th>达标值</th>
</tr>
<tr ng-repeat="x in lists track by $index">
<td>{{x.CVersion}}</td>
<td contenteditable = "true" ng-blur="submit($event)" title='{{x.duName}}'>{{x.TargetVal}}</td>
</tr>
</table>
</div>
<script type="text/javascript">
angular.module("myApp",[]);
angular.module("myApp").controller("targetControl",function($scope,$http){
$http({
url:*******,
method:"Get"
}).success(function(data)
{
$scope.index = data;
}).error(function(data))
{
alert("error");
};
$scope.onIndexChanged()
{
alert($("#stIndex option:selected").text());
};
//当达标值那一列值发生变化时,响应该事件
$scope.submit = function(obj)
{
//obj.target可以获取到当前td对象的所有属性,例如obj.target.title
}
});
</script>
刚开始调试的时候,是报了一个错:
Error:[ngRepeat:dupes] http://******
调查发现,是因为indexs里有重复数据导致的;
好像是只有有一项有重复数据就会报错(我测试的时候,仅达标值这一些列有重复元素),必须加上track by $index才行。
加上track by $index相当于给重复数据加上了序号,重复的数据就相当于不重复了。
然后我在给select标签去重的时候,也加上了track by $index,结果发现加上之后:
1、select的重复元素并没有去除;
2、无论选择select的哪个值,ng-change事件只能触发一次,后面都不能触发了;
3、select选项默认选中租最后一项,及时设置另一项为selected状态都没用。
经过调查后发现,track by $index对select标签去重并没有什么作用,而且select标签有重复数据时也不会报错。
ng-change事件不触发的原因是,加上track by $index之后,ng-model的值不会再发生变化,永远等于select标签的最后一个值,
看起来就像ng-change方法没有触发的样子。
select标签去除重复有另一种过滤机制:
app.filter('unique',function(){
return function(collection, keyname){
var output = [];
keys = [];
angular.forEach(collection, function(item){
var key = item[keyname];
if(keys.indexof(key) === -1){
keys.push(key);
output.push(item);
}
});
return output;
}
})
<div ng-repeat="item in items | unique:'id'"></div>
初步记录在此,后续再分析具体原因。
转载于:https://www.cnblogs.com/wanggang2016/p/6031936.html
AngularJS track by $index引起的思考相关推荐
- Uber H3 index 地图索引思考
H3 是 uber 设计的六边形空间索引,go 语言操作包是 h3-go,可以通过经纬度获取所在的 h3 六边形边界,每个经纬度对应的六边形都是确定的,每个六边形唯一对应了一个 h3index.在业务 ...
- 在使用angularjs过程,ng-repeat中track by的作用
转载:http://segmentfault.com/q/1010000000405730<div ng-repeat="links in slides"> <d ...
- 再谈angularJS数据绑定机制及背后原理—angularJS常见问题总结
Angular 的数据绑定采用什么机制,详述原理? 脏检查机制.阐释脏检查机制,必须先了解如下问题. 单向绑定(ng-bind) 和 双向绑定(ng-model) 的区别? ng-bind 单向数据绑 ...
- 深究AngularJS——排序
先看看代码吧: //按时间排序 <html> <head> <meta charset="utf-8"> <script src=&quo ...
- AngularJS自定义指令详解(有分页插件代码)
前言 除了 AngularJS 内置的指令外,我们还可以创建自定义指令. 通过 .directive() 函数来添加自定义的指令. 调用自定义指令时,需要在HTMl 元素上添加自定义指令名. 自定义指 ...
- AngularJS学习笔记(一)
前言 几个月之前了解过一点Angular,主要是通过phonecat应用程序了解一些入门东西,但是当被问及什么是Angular或者你对Angular的理解时,只记得一个MVVM双向数据绑定,显然这是不 ...
- [ngRepeat:dupes] Duplicates in a repeater are not allowed. Use 'track by' expression to specify uniq
angularjs 使用ng-repeat报错 <div ng-init="words = ['高校','高校','高校']" ng-repeat="word in ...
- angularjs -- 监听angularJs列表数据是否渲染完毕
前端在做数据渲染的时候经常会遇到在数据渲染完毕后执行某些操作,这几天就一直遇到在列表和表格渲染完毕后,执行点击和选择操作.对于angularjs处理这类问题,最好的方式就是指令 directive. ...
- AngularJs学习笔记(二)
1.指令 ng-** --> angularJs内置的指令 自定义指令: app.directive(name,function(){}); 指令命名:采用驼峰式 前缀一般是工程名字的缩写 后缀 ...
最新文章
- C语言内存字节对齐小结
- 桶排序(BucketSort)(java)
- pyecharts学习(part3)--简单图表绘制及参数优化
- leetcode 198. 打家劫舍 思考分析
- bz10451045: [HAOI2008] 糖果传递
- 计算机一级a河北,2009年河北省计算机一级考试A卷
- Kubernetes可以代替Docker,可笑
- 【历史上的今天】2 月 1 日:网景浏览器停止支持;id Software 成立;Intel 80286 芯片问世
- 电工技术(3)—电路的分析方法二
- matlab imcrop 用法
- 通达OA流程中心触发器使用实例
- 微信小程序 教你如何复制页面路径 (以及京东、虎牙、苏宁、拼多多、等大厂的加密路径详解)(多图!!!)
- Loopback接口的主要作用
- [心灵] 我对这个世界充满了想象力和好奇心
- 电源篇 - 降压电路LDO
- ffmpeg混音(混声)命令
- Linux 内核引导参数简介
- 2021年,谁发现了边缘计算的赚钱生意?
- 2017年7月历史文章汇总
- C1认证学习十二(网络拓扑)
热门文章
- samba服务器的搭建【在windows查看linux的共享文件】
- 检验mysql安装成功win7,手把手教你win7系统成功安装 RMySQL的处理对策
- 那个准点下班的人,比我先升职了...
- 阿里大牛总结:学会这些Kafka知识,吊打面试官就是分分钟的事
- 为什么做的报表领导不满意,如何提升报表的价值?
- 颜色叠加 java_可绘制Android上的颜色叠加
- samp服务器信息获取,手把手教你写一个简单的服务器
- sql between 效率高吗_整个SQL语句的执行效率都靠它了...
- 开关怎么使用_智能数显压力开关怎么使用?
- 算法导论 练习14.1-7