为什么ng模型没有更新

Why is ng-model not updating?

本文关键字：更新 模型 ng 为什么      更新时间：2023-09-26

我正在尝试用输入[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根本不会更新。

有人能解释一下原因吗？

谢谢。

您需要在集合中使用$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);

$watchCollection的设计目的不是监视对象数组中对象内部的更新。有关更多信息，请参阅官方文档。

您可以使用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;
}
相关文章：