今天写了一段程序,只是一个简答的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引起的思考的更多相关文章

  1. angularJS ng-repeat="item in XXX track by $index"问题记录

    参考:https://blog.csdn.net/lunhui1994_/article/details/80236315 问题:项目中对数据做了分页效果,理想是:当页数大于6时,隐藏>6的页数 ...

  2. ng-repeat 中的 track by $index

    用ng-repeat指令遍历一个javascript数组,当数组中有重复元素的时候,angularjs会报错,这是因为ng-Repeat不允许collection中存在两个相同Id的对象. 对于数字或 ...

  3. angular ng-repeat点击切换样式,浅谈track by $index

    前言 angular ng-repeat点击切换样式,ng-repeat点击切换class样式,巧用ng-repeat track by $index. 1.问题 一个ul包含多个li,li通过ng- ...

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

    在angular中使用ng-repeat时数组中有重复元素,要用item in items track by $index,不然会报错 <div class="" ng-in ...

  5. 为Angularjs ngOptions加上index解决方案

    今天在Angularjs交流群中有位童学问道如何为Angular select的ngOptions像Angularjs的ngRepeat一样加上一个索引$index. 其实对于这个问题来说Angula ...

  6. angular track by $index

    这个东西配合删除数组时会出现永远删除uoloadPicArr这个数组的最后一个一项 其用法是主要用在当ng-repeat循环时如果其内部的dom元素有id属性存在 可以避免页面出现相同的id  只是一 ...

  7. AngularJs使用过程中,在ng-repeat中使用track by

    1.问题描述: 点击删除后:table中的被选中设备确实被删除了,但是data-table并没有重新加载出来, 查看js代码: 先对$scope.data_table进行了destroy(),然后重新 ...

  8. 转:在使用angularjs过程,ng-repeat中track by的作用

    转载:链接 <div ng-repeat="links in slides"> <div ng-repeat="link in links track ...

  9. 摆脱DOM操作,从TodoMVC看angularJS

    取代jQuery? 我很久之前便听说了angularJS的大名,之前的leader也经常感叹angularJS的设计如何如何精妙,可叹一直没有机会深入了解,国庆长假因为没钱出游,倒是可以对他做一个了解 ...

随机推荐

  1. 豆约翰博客备份专家博客导出示例(PDF,CHM)

    示例1: CSDN博客: 示例博客主页:http://blog.csdn.net/shenyisyn/ CHM文件图示:下载地址 PDF文件图示:下载地址 示例2: 新浪博客: 示例博客主页:http ...

  2. sorts

    各种排序算法: #include <stdio.h> #include <string.h> #include <ctype.h> #include <std ...

  3. [GRYZ2014]递增子序列最大和

    [问题描述] 给定长度为n的正整数序列a1,a2,…,an. 求一个递增的子序列,和最大. [输入] 第一行,n,表示给定序列的个数. 第二行,n个用空格隔开的正整数. [输出] 递增子序列的最大和. ...

  4. javascript 和jqurry详解

    javascript写的图表库,收费 highcharts jqurry有两个图标函数不收费,好用 Flot.PlotKit与MochiKit 官网下载 http://www.flotcharts.o ...

  5. atomic_t原子操作

    所谓原子操作,就是该操作绝不会在执行完毕前被任何其他任务或事件打断,也就说,它的最小的执行单位,不可能有比它更小的执行单位,因此这里的原子实际是使用了物理学里的物质微粒的概念. 原子操作需要硬件的支持 ...

  6. JDBC_demo:java连接mysql过程

    1.任何数据库驱动程序都提供对java.sql.Driver接口的驱动类,mysql-connector-java-5.1.39-bin.jar中Driver: package com.mysql.j ...

  7. SRM 442(1-250pt, 1-500pt)

    DIV1 250pt 题意:将一个数表示成质因子相乘的形式,若乘式所含数字的个数为质数,则称A为underprime.比如12 = 2*2*3,则含3个数字,是underprime.求A, B之间un ...

  8. ThinkPHP 快速入门

    1. 框架简介 框架是程序结构代码的集合,而不是业务逻辑代码.集合中包含了很多类.函数和功能类包.这个集合是按照一定标准组成的功能体系.体系有很多设计模式,比如MVC等. 2. ThinkPHP框架学 ...

  9. hbulider 快捷键以及常用

    跳转到行        Ctrl + G   页首        Ctrl + Home   页尾        Ctrl + End   下一个选项卡        Ctrl + Tab   上一个 ...

  10. 04、生成 HTMLTestRunner 测试报告

    1.HTMLTestRunner 是 Python 标准库的 unittest 模块的一个扩展.它生成易于使用的 HTML 测试报告 1>下载HTMLTestRunner.py文件,地址为: h ...