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>
初步记录在此,后续再分析具体原因。
AngularJS track by $index引起的思考的更多相关文章
- angularJS ng-repeat="item in XXX track by $index"问题记录
参考:https://blog.csdn.net/lunhui1994_/article/details/80236315 问题:项目中对数据做了分页效果,理想是:当页数大于6时,隐藏>6的页数 ...
- ng-repeat 中的 track by $index
用ng-repeat指令遍历一个javascript数组,当数组中有重复元素的时候,angularjs会报错,这是因为ng-Repeat不允许collection中存在两个相同Id的对象. 对于数字或 ...
- angular ng-repeat点击切换样式,浅谈track by $index
前言 angular ng-repeat点击切换样式,ng-repeat点击切换class样式,巧用ng-repeat track by $index. 1.问题 一个ul包含多个li,li通过ng- ...
- 在angular中使用ng-repeat时数组中有重复元素,要用item in items track by $index
在angular中使用ng-repeat时数组中有重复元素,要用item in items track by $index,不然会报错 <div class="" ng-in ...
- 为Angularjs ngOptions加上index解决方案
今天在Angularjs交流群中有位童学问道如何为Angular select的ngOptions像Angularjs的ngRepeat一样加上一个索引$index. 其实对于这个问题来说Angula ...
- angular track by $index
这个东西配合删除数组时会出现永远删除uoloadPicArr这个数组的最后一个一项 其用法是主要用在当ng-repeat循环时如果其内部的dom元素有id属性存在 可以避免页面出现相同的id 只是一 ...
- AngularJs使用过程中,在ng-repeat中使用track by
1.问题描述: 点击删除后:table中的被选中设备确实被删除了,但是data-table并没有重新加载出来, 查看js代码: 先对$scope.data_table进行了destroy(),然后重新 ...
- 转:在使用angularjs过程,ng-repeat中track by的作用
转载:链接 <div ng-repeat="links in slides"> <div ng-repeat="link in links track ...
- 摆脱DOM操作,从TodoMVC看angularJS
取代jQuery? 我很久之前便听说了angularJS的大名,之前的leader也经常感叹angularJS的设计如何如何精妙,可叹一直没有机会深入了解,国庆长假因为没钱出游,倒是可以对他做一个了解 ...
随机推荐
- 使用VisualStudio进行单元测试之一
使用VisualStudio中的单元测试功能,可以很方便的创建单元测试项目.编写单元测试代码以及执行单元测试.而如何在VisualStudio中使用单元测试功能,就是本文和后面几篇想要说的了. ...
- Java之Arrays.asList陷阱
Java.Util.Arrays可以将数组转换为List,具体的定义如下: @SafeVarargs public static <T> List<T> asList(T... ...
- selenium webdriver(1)---浏览器操作
启动浏览器 如何启动浏览器已在上篇文章中说明,这里还是以chrome为例,firefox.IE启动方式相同. //启动浏览器 import org.openqa.selenium.WebDriver; ...
- Parallels Desktop 7用bootcamp安装win7 后如何激活WIN7
在parallels的选项中,在硬件选项卡的引导标记中添加:kernel.waet.enable=0 ,重新启动win7即可激活.
- linearizing the depth in vertex shader
please refer to http://www.mvps.org/directx/articles/linear_z/linearz.htm When using a programmable ...
- java 解惑
java对转义字符没有提供任何特殊处理.编译器在将程序解析成各种符号之前,先将 Unicode 转义字符转换成为它们所表示的字符[JLS 3.2]
- Kth Ancestor 第k个祖先问题
题目出处 这道题目出自hackerrank的8月月赛的第三题. 题目大意: 先给出一棵树 之后有三种操作分别为:加边,查询,和删除一个节点 查询的时候要给出任意节点x的第k个祖先 每组数据有t个cas ...
- git与svn的区别-小结一下
1)Git是分布式的,SVN不是: 这 是GIT和其它非分布式的版本控制系 统,例如SVN,CVS等,最核心的区别.好处是跟其他同事不会有太多的冲突,自己写的代码放在自己电脑上,一段时间后再提交.合并 ...
- Jmeter聚合报告分析
Label:每个 JMeter 的 element(例如 HTTP Request)都有一个 Name 属性,这里显示的就是 Name 属性的值 Average:平均响应时间--默认情况下是单个 Re ...
- WinForm TextBox自定义扩展方法数据验证
本文转载:http://www.cnblogs.com/gis-crazy/archive/2013/03/17/2964132.html 查看公司项目代码时,存在这样一个问题:winform界面上有 ...