今天寫了一段程序,只是一個簡答的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>
初步記錄在此,后續再分析具體原因。