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>

 

 

初步記錄在此,后續再分析具體原因。

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM