Angular复选框ng-change点击全选按钮不触发问题求助

这个问题其实是AngularJS里一个很常见的小坑——ng-change指令只会响应用户的手动交互操作（比如你点击复选框的时候），而当你通过代码直接修改ng-model绑定的变量值时，它是不会自动触发的。

下面给你两种可行的解决方案，你可以根据需求选择：

方案一：手动触发回调函数（最快最简单） #

既然全选是通过代码批量修改模型值，那我们只要在修改完每个值之后，主动调用itemChecked方法就行了。甚至可以加个判断，只在状态真的发生变化时才触发，避免不必要的重复调用：

修改你的toggleSelection方法：

$scope.toggleSelection = function() {
  for (var i in $scope.list) {
    // 只有当前未选中时才修改并触发回调
    if (!$scope.list[i]) {
      $scope.list[i] = true;
      $scope.itemChecked(i);
    }
  }
};

方案二：重构数据结构，统一状态更新逻辑（更健壮） #

你现在的list数组存的是布尔值这种原始类型，在ng-repeat里绑定的时候其实是值传递，有时候会出现绑定不灵敏的问题。更推荐的做法是把每个选项改成对象，用引用类型来绑定，同时封装一个统一的更新方法，不管是手动点击还是全选，都走同一个逻辑：

修改HTML：

把ng-model绑定到对象的checked属性上：

<div ng-app="Test">
  <div ng-controller="TestController">
    <form>
      <div ng-repeat="item in list track by $index">
        <input type="checkbox" ng-model="item.checked" ng-change="itemChecked($index)">{{$index + 1}}
      </div>
    </form>
    <button ng-click="toggleSelection()">Select all</button>
  </div>
</div>

修改JavaScript：

更新数组结构，并封装更新方法：

var app = angular.module("Test", []);
app.controller("TestController", [
  "$scope",
  "$http",
  function($scope, $http) {
    // 改成对象数组，每个元素存选中状态
    $scope.list = [
      {checked: false},
      {checked: false},
      {checked: false},
      {checked: false},
      {checked: false}
    ];

    $scope.itemChecked = function(i) {
      console.log(i);
    };

    // 封装统一的更新方法
    var updateItemStatus = function(index, isChecked) {
      $scope.list[index].checked = isChecked;
      $scope.itemChecked(index);
    };

    $scope.toggleSelection = function() {
      for (var i in $scope.list) {
        if (!$scope.list[i].checked) {
          updateItemStatus(i, true);
        }
      }
    };
  }
]);

补充说明：为什么会出现这个问题？ #

AngularJS的ng-change本质上是监听用户的交互事件（比如click、input），而不是模型值的变化。如果模型值是通过代码修改的，没有用户交互动作，自然不会触发ng-change。这是框架设计的有意为之，避免无限循环或者不必要的事件触发。

内容的提问来源于stack exchange，提问作者Vishnu Y S