확인란을 선택하면 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

코드를 수정하려면 @Sajeetharan의 답변을 따라 깊은 시계 수집을하십시오. 하지만 이벤트를 캡처하려면 귀하의 경우에 ng-change를 사용해야한다고 생각합니다.

<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이 실행되지 않습니다.

답변

관련 문제