Почему ng-модель не обновляется?

Question

Я пытаюсь выполнить простой angularJS-тест с помощью ввода [type = checkbox] и отобразить количество элементов, которые выбраны. В настоящее время, мое решение выглядит следующим образом:

Контроллер:

$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

Вы должны сделать глубокий часы в вашей коллекции, используя третий параметр (истина) в $ часы. Смотрите рабочий 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);