我的控制器和手表中有一些功能可以隱藏和顯示我頁面上的一些元素.
我最初創(chuàng)建了一個對象:
$scope.selectedItems = [];
通過一些功能,我可以選擇取消選擇項(xiàng)目:
$scope.selectAllItems = function(items){ for(var i =0; i < items.length; i ){ items[i].selected = true; $scope.selectedItems.push(items[i]._id); } }$scope.deselectAllItems = function(items){ for(var i=0; i<items.length; i ){ items[i].selected = false; $scope.selectedItems = []; }}$scope.inverseAllItems = function(items){ $scope.selectedItems = []; for(var i=0; i<items.length; i ){ items[i].selected = items[i].selected ? false : true; if(items[i].selected) $scope.selectedItems.push(items[i]._id); }}$scope.selectItem = function(item){ console.log(item.selected); if(item.selected){ console.log(item._id); $scope.selectedItems.push(item._id); }else{ console.log("hier2"); if($scope.selectedItems.indexOf(item._id)) $scope.selectedItems.splice($scope.selectedItems.indexOf(item._id),1) }}
并在$scope.selectedItems上觀看
$scope.$watch("selectedItems", function handleSelectedItemsChange(newValue, oldValue){ console.log("$scope.selectedItems.length", $scope.selectedItems.length); if($scope.selectedItems.length > 1){ $scope.multipleSelect = true; $('.itemStatus').toggleClass('hidden', true); }else{ $scope.multipleSelect = false; $('.itemStatus').toggleClass('hidden', false); }})
問題是手表并不總是被觸發(fā).在使用’inverseSelection’和’deselectAll’函數(shù)后,它總是被觸發(fā),但在使用’selectAll’和’selectItem'(一對一選擇項(xiàng)目)后不會被觸發(fā),但我沒有看到任何差異的方式我在selectedItems數(shù)組中推送條目.
有人可以幫幫我嗎?
解決方法:
更詳細(xì)地說明它在你提到的兩個函數(shù)上發(fā)生的原因:在inverseSelection和deselectAll函數(shù)中初始化一個新數(shù)組.
$scope.selectedItems = [];
默認(rèn)情況下,$scope.$watch僅比較對象引用,即“它是否仍然是同一個對象”.它并不關(guān)心實(shí)際內(nèi)容.這就是為什么在初始化一個新的空陣列時手表會激活的原因.在其他函數(shù)中,您修改已存在的數(shù)組,因此引用是相同的.對于手表來說,它是同一個物體,所以它不會發(fā)射.
正如其他人已經(jīng)提到的,有兩種方法可以解決它.
> $scope.$watch with objectEquality === true
$scope的第三個參數(shù).$watch告訴angular比較對象的內(nèi)容:
$scope.$watch("selectedItems", function handleSelectedItemsChange(newValue, oldValue){ ...}, true)
When objectEquality == true, inequality of the watchExpression is determined according to the angular.equals function
https://docs.angularjs.org/api/ng/type/$rootScope.Scope#$watch
> $scope.$watchCollection
在你的情況下,這將是更好的解決方案,因?yàn)樗皇恰皽\看”對象.這意味著它適用于數(shù)組,但不適用于嵌套對象.對于你的數(shù)組,性能比使用$scope更好.$watch with objectEquality.
$scope.$watchCollection("selectedItems", function handleSelectedItemsChange(newValue, oldValue){ ...})
for arrays, this implies watching the array items; for object maps, this implies watching the properties
https://docs.angularjs.org/api/ng/type/$rootScope.Scope#$watchCollection
來源:https://www.icode9.com/content-1-335401.html