NG 모델이 업데이트되지 않는 이유는 무엇입니까?

Question

입력 [type = checkbox]로 간단한 angularJS 테스트를 수행하고 선택된 항목 수를 표시하려고합니다. 현재, 내 솔루션은 다음과 같습니다

컨트롤러 :

$scope.items = [{ 
    id: 1, 
    title: 'item1', 
    selected: true 
},{ 
    id: 2, 
    title: 'item2', 
    selected: false 
},{ 
    id: 3, 
    title: 'item3', 
    selected: false 
},{ 
    id: 4, 
    title: 'item4', 
    selected: false 
}] 

$scope.$watchCollection('items', function() { 
    var no = 0; 
    for(var i = 0; i < $scope.items.length; i++) { 
     if($scope.items[i].selected === true) 
      no++; 
    } 
    $scope.noSelectedItems = no; 
} 

보기 :

<div>Items ({{ noSelectedItems }})</div> 
    <div ng-repeat="item in items"> 
     <input id="{{ item.id }}" 
       type="checkbox" 
       ng-model="item.selected" 
       ng-checked="item.selected" /> 
    <label for="{{ item.id }}" >{{ item.title }}</label> 
</div> 

초기화 작동, 그래서 "항목 (1)"하지만 난 더 많은 항목을 선택하면 얻을 $ scope.items는 전혀 업데이트되지 않습니다.

이유를 설명 할 수 있습니까?

감사합니다.

Answer 1

$watchCollection은 안에 개체의 개체가있는 업데이트를 보지 않도록 설계되었습니다. 자세한 내용은 offical docs을 참조하십시오.

ngChange 지시어를 사용하여 문제를 해결할 수 있습니다.

HTML :

<div ng-repeat="item in items"> 
    <input id="{{ item.id }}" 
      type="checkbox" 
      ng-model="item.selected" 
      ng-checked="item.selected" 
      ng-change="doSomething()"/> 
</div> 

컨트롤러 :

$scope.doSomething = function() { 
    var no = 0; 
    for(var i = 0; i < $scope.items.length; i++) { 
    if($scope.items[i].selected === true) { 
     no++; 
    } 
    } 
    $scope.noSelectedItems = no; 
} 

Answer 2

당신은 $ 시계의 세 번째 매개 변수 (true)를 사용하여 컬렉션에 깊은 시계를 할 필요가있다. 작업 JSFiddle를 참조하십시오 http://jsfiddle.net/syv8cww1/

$scope.$watch('items', function() { 
    var no = 0; 
    for(var i = 0; i < $scope.items.length; i++) { 
     if($scope.items[i].selected === true) 
      no++; 
    } 
    $scope.noSelectedItems = no; 
}, true);