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>

初步记录在此,后续再分析具体原因。

时间: 2024-10-29 19:06:42

AngularJS track by $index引起的思考的相关文章

ng-repeat 之 track by $index

<ul> <li ng-repeat="item in items">{{item}}</li> </ul> 以上代码报错:Error: [ngRepeat:dupes]:这个出错提示具体到题主的情况,意思是指数组中有2个以上的相同数字.ngRepeat不允许collection中存在两个相同Id的对象 解决方案: <ul> <li ng-repeat="item in items track by $inde

在angular中使用ng-repeat时数组中有重复元素,要用item in items track by $index

在angular中使用ng-repeat时数组中有重复元素,要用item in items track by $index,不然会报错 <div class="" ng-init="names=[1,2,3,4,5,5]"> <p>循环对象:</p> <ul> <li ng-repeat="x in names track by $index"> {{ x }}</li> &

摆脱DOM操作,从TodoMVC看angularJS

取代jQuery? 我很久之前便听说了angularJS的大名,之前的leader也经常感叹angularJS的设计如何如何精妙,可叹一直没有机会深入了解,国庆长假因为没钱出游,倒是可以对他做一个了解...... 根据之前的经验,就现有的前端项目,如果最初没有良好的设计,做到一定阶段一定会变得难以维护,就算最初有设计,变化无常的PM也会让你的项目BUG丛生. 一个页面的复杂程度不断的增加,依赖模块也会变得混乱,而其中最为头疼的就是页面级随心所欲的DOM操作了! MVC类的框架可以很好的解决以上问

Angularjs和Ionic框架搭建webApp

本文原创版权归 简书作者 噜啦啦噜啦啦噜啦噜啦噜 所有,转载请联系作者获得授权,并于文章开头标注原创作者及出处,以示尊重! 文/噜啦啦噜啦啦噜啦噜啦噜(简书作者)原文链接:http://www.jianshu.com/p/ea0dcf1d31c9著作权归作者所有,转载请联系作者获得授权,并标注"简书作者". AngularJS简介:AngularJS 是一个为动态WEB应用设计的结构框架,提供给大家一种新的开发应用方式,这种方式可以让你扩展HTML的语法,以弥补在构建动态WEB应用时静

再谈angularJS数据绑定机制及背后原理—angularJS常见问题总结

Angular 的数据绑定采用什么机制,详述原理? 脏检查机制.阐释脏检查机制,必须先了解如下问题. 单向绑定(ng-bind) 和 双向绑定(ng-model) 的区别? ng-bind 单向数据绑定($scope -> view),用于数据显示,简写形式是 {{}}. 两者的区别在于页面没有加载完毕 {{val}} 会直接显示到页面,直到 Angular 渲染该绑定数据(这种行为有可能将 {{val}} 让用户看到):而 ng-bind 则是在 Angular 渲染完毕后将数据显示. ng-

AngularJs学习——实现列表内容项的增加删除

效果截图: 说明:引入bootstrap.min.css样式库和angular.min.js的静态资源库,实现列表内容的增加和删除操作. AngularJS代码: <script src="http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"></script> <script> angular.module('myapp',[]) .controller('myctrl',funct

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

用ng-repeat指令遍历一个javascript数组,当数组中有重复元素的时候,angularjs会报错,这是因为ng-Repeat不允许collection中存在两个相同Id的对象. 对于数字或者字符串等基本数据类型来说,它的id就是它自身的值.因此数组中是不允许存在两个相同的数字的.为了规避这个错误,需要定义自己的track by表达式. // 业务上自己生成唯一的iditem in items track by item.id //或者直接拿循环的索引变量$index来用item in

(十三)通过DOM事件DOMNodeRemoved,看ng-repeat的性能问题以及track by的作用

1.DOMNodeRemoved事件 DOMNodeRemoved事件这里不做过多介绍,有个大概的认识,会使用即可.如下代码给content对象注册了DOMNodeRemoved事件处理函数,当content下有子元素被删除的时候,就会触发DOMNodeRemoved事件. <script> window.onload = function(){ var dom = document.getElementById("content"); dom.addEventListen

一个利用HTML5 localStorage功能的todo应用(angularJs+Bootstrap)

今天在网上看到一个简单的todo应用,使用angularJs做前端数据绑定,利用localStorage来存储数据,觉得挺有意思的. <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html ng-app="todoApp"> <head> <me