チェックボックスの切り替え時にng-modelのwatchCollectionが起動しない

チェックボックスをクリックすると、$scope.$watchCollection('classes'は起動しません。助言がありますか？チェックボックスの切り替え時にng-modelのwatchCollectionが起動しない

<div class="filter-column"> 
    <div class="filter-title">Class</div> 
    <div class="bottom-line"></div> 
    <div class="overflow-container"> 
     <div ng-repeat="class in classes | orderBy"> 
     <input type="checkbox" 
      ng-model="class.checked" > 
     {{class.description}} 
     </div> 
    </div> 
    </div>

$scope.$watchCollection('classes', function(newValue) { 
    console.log('sss') 
});

出典

2016-11-04 dman

私は$ scope.classesを変更しようとしていないと思う$ 'watchCollection'は、 –

チェックボックスを切り替えると、 'ng-model =" class.checked "と値が設定されます。' – dman

あなたのコードを修正するには、Deep Watchコレクションの@Sajeetharanからの回答に従ってください。しかし、私はあなたのケースでは、イベントをキャプチャするためにあなたのケースで使用する必要があると思う

<input type="checkbox" ng-model="class.checked" ng-change="chkChecked(class);"> {{class.description}}

出典

2016-11-04 07:42:24

ng-changeはまさに私が使い終わったものです。私はそれが角の練習に反対していたかどうかは分かりませんでした。 – dman

あなたはその場合のdeepwatchを持つことができ、

$scope.$watch(function($scope) { 
     return $scope.classes. 
     map(function(obj) { 
     return obj.checked 
     }); 
    }, function(newVal) { 
     $scope.checked = true; 
     alert("css chagned"); 
    }, true);

DEMO

出典

2016-11-04 06:54:20 Sajeetharan

は 'watchCollection'と同じことをしませんか？ – dman

// Code goes here 
 

 
angular 
 
    .module('myApp', []) 
 

 
.controller('testController', ['$scope', 
 
    function($scope) { 
 

 
    $scope.classes = [{ 
 
     description: 'label1', 
 
    }, { 
 
     description: 'label2', 
 
    }]; 
 

 
    $scope.$watch('classes', function(newValue) { 
 
     console.log("watcher called"); 
 
    }, true); 
 

 
    } 
 
]);

<!DOCTYPE html> 
 
<html data-ng-app="myApp"> 
 

 
<head> 
 
    <link rel="stylesheet" href="style.css"> 
 
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular.min.js"></script> 
 
    <script src="script.js"></script> 
 
</head> 
 

 
<body data-ng-controller="testController"> 
 

 
    <div class="filter-column"> 
 
    <div class="filter-title">Class</div> 
 
    <div class="bottom-line"></div> 
 
    <div class="overflow-container"> 
 
     <div ng-repeat="class in classes | orderBy"> 
 
     <input type="checkbox" ng-model="class.checked" ng-change="call(class)">{{class.description}} 
 
     </div> 
 
    </div> 
 
    </div> 
 

 
</body> 
 

 
</html>

$ watchは変更を取得できます。

出典

2016-11-04 06:55:24

理由を参照してください... http：//stackoverflow.com/questions/26393148/why-does-scope-watch-work-but-scope-watchcollection-does-not –

チェックボックスの切り替え時にng-modelのwatchCollectionが起動しない

答えて

関連する問題