如何在AngularJS中实现复选框‘全选’功能？

没问题，我来帮你搞定这个全选功能，在AngularJS里其实很容易实现，核心就是利用双向数据绑定和数组的遍历判断。下面分步骤给你讲具体怎么做：

1. 准备控制器数据 #

首先在你的AngularJS控制器里，需要定义两个关键数据：

• 一个数组来存储你的选项列表，每个选项要有name（显示文本）和selected（是否选中）属性
• 一个变量来控制全选复选框的状态，比如selectAll

示例控制器代码：

angular.module('myApp', [])
  .controller('CheckboxController', function($scope) {
    // 你的选项列表，根据实际需求修改
    $scope.options = [
      { name: '选项1', selected: false },
      { name: '选项2', selected: false },
      { name: '选项3', selected: false },
      { name: '选项4', selected: false }
    ];

    // 全选状态变量
    $scope.selectAll = false;

    // 全选/取消全选的方法
    $scope.toggleSelectAll = function() {
      // 遍历所有选项，把selected属性设为和selectAll一致
      angular.forEach($scope.options, function(option) {
        option.selected = $scope.selectAll;
      });
    };

    // 监听单个选项的变化，同步全选框状态
    $scope.checkIndividual = function() {
      // 判断所有选项是否都被选中，更新selectAll的值
      $scope.selectAll = $scope.options.every(function(option) {
        return option.selected;
      });
    };
  });

2. 绑定到HTML视图 #

然后在你的HTML里，把控制器和复选框绑定起来：

<div ng-app="myApp" ng-controller="CheckboxController">
  <!-- 全选复选框 -->
  <label>
    <input type="checkbox" ng-model="selectAll" ng-click="toggleSelectAll()">
    全选
  </label>

  <!-- 单个选项复选框 -->
  <div ng-repeat="option in options">
    <label>
      <input type="checkbox" ng-model="option.selected" ng-click="checkIndividual()">
      {{ option.name }}
    </label>
  </div>
</div>

关键逻辑说明 #

• 全选功能：点击全选框时，toggleSelectAll方法会遍历所有选项，把它们的selected属性同步为全选框的状态。
• 反向同步：当单个选项被取消选中时，checkIndividual方法会用every判断所有选项是否都选中，从而更新全选框的状态，避免出现全选框还勾选着但有选项没选的矛盾情况。
• 双向绑定：AngularJS的ng-model会自动同步视图和控制器的数据，不用手动操作DOM，这也是AngularJS的优势所在。

如果你的现有页面里的复选框不是用数组管理的，而是单个的ng-model变量，那稍微调整一下逻辑就行：比如把所有单个复选框的状态变量放到一个对象里，然后在全选方法里遍历这个对象的属性来设置状态，监听的时候也遍历判断。

举个单个变量的适配例子：
控制器里：

$scope.checkboxes = {
  box1: false,
  box2: false,
  box3: false
};
$scope.selectAll = false;

$scope.toggleSelectAll = function() {
  for (var key in $scope.checkboxes) {
    $scope.checkboxes[key] = $scope.selectAll;
  }
};

$scope.checkIndividual = function() {
  $scope.selectAll = Object.values($scope.checkboxes).every(val => val);
};

视图里：

<input type="checkbox" ng-model="selectAll" ng-click="toggleSelectAll()"> 全选
<input type="checkbox" ng-model="checkboxes.box1" ng-click="checkIndividual()"> 选项1
<input type="checkbox" ng-model="checkboxes.box2" ng-click="checkIndividual()"> 选项2
<input type="checkbox" ng-model="checkboxes.box3" ng-click="checkIndividual()"> 选项3

这样就能完美实现你要的全选功能啦！

内容的提问来源于stack exchange，提问作者Menphis