为什么 ng-model 不更新？

Question

我正在尝试使用 input[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

你需要在你的集合中做一个深度观察，使用 $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;
}