为什么ng-model没有更新？

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>

初始化有效，所以我得到“Items（1）”但是当我选择更多项时，$ scope.items根本不会更新。

任何人都可以解释原因吗？

谢谢。

Answer 1

您需要使用$ watch中的第三个参数（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);

Answer 2

$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;
}