Angular Checkboxes“全选”功能，最初只选择了一个框答案

【问题标题】：Angular Checkboxes "Select All" functionality with only one box selected initiallyAngular Checkboxes“全选”功能，最初只选择了一个框
【发布时间】：2015-02-11 15:42:53
【问题描述】：

我有一个包含 3 个复选框的表单：“Select All”、“Option 1”和“Option 2”。

<form id="selectionForm">
    <input type="checkbox" ng-model="selectAll" >Select all
    <br>
    <input type="checkbox" ng-checked="selectAll" checked>Option 1
    <br>
    <input type="checkbox" ng-checked="selectAll">Option 2
</form>

在初始页面加载时，我希望仅 选项 1 被选中。然后，如果 Select All 复选框被选中，它应该会自动选中 Option 1 和 Option 2，以便全部选中。

问题在于初始页面加载时 ng-checked="selectAll" 被评估，这覆盖了我最初仅检查选项 1 的尝试（最初 selectAll = false），因此没有选择任何内容。

这似乎是一个很容易解决的问题，但我无法找到解决方案...提前感谢您的任何见解或建议！

【问题讨论】：

标签： html angularjs checkbox angularjs-ng-model

【解决方案1】：

另一种方法是使用模型作为选项，在模型中设置默认选择，并让控制器处理全选逻辑。

angular.module("app", []).controller("ctrl", function($scope){
  
  $scope.options = [
    {value:'Option1', selected:true}, 
    {value:'Option2', selected:false}
  ];
  
  $scope.toggleAll = function() {
     var toggleStatus = !$scope.isAllSelected;
     angular.forEach($scope.options, function(itm){ itm.selected = toggleStatus; });
   
  }
  
  $scope.optionToggled = function(){
    $scope.isAllSelected = $scope.options.every(function(itm){ return itm.selected; })
  }
});

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js">    </script>
<div ng-app="app" ng-controller="ctrl">
<form id="selectionForm">
    <input type="checkbox" ng-click="toggleAll()" ng-model="isAllSelected">Select all
    <br>
     <div ng-repeat = "option in options">
        <input type="checkbox" ng-model="option.selected" ng-change="optionToggled()">{{option.value}}
     </div>
</form>
  {{options}} 
</div>

【讨论】：

这实际上是一个更好的方法。
感谢您的回答。这似乎是实现此类功能的一种更角度的方式
@CumoloNimbus 欢迎您。如果您手动选中所有复选框，则添加了一种自动选中 selectAll 复选框的方法，反之亦然...
@CumuloNimbus 另请注意，我使用的是 array.every，要在旧版浏览器中使用，您需要添加链接的 MDN 文档中提到的 shim。跨度>
@Cody: ng-change 表达式将不被评估，因为复选框模型值以编程方式更改，而不是用户与复选框交互。见docs.angularjs.org/api/ng/directive/ngChange

【解决方案2】：

试试这个：

<form id="selectionForm">
    <input type="checkbox" ng-model="selectAll" >Select all
    <br>
    <input type="checkbox" ng-checked="selectAll || option1" ng-init="option1=true" ng-model="option1">Option 1
    <br>
    <input type="checkbox" ng-checked="selectAll">Option 2
</form>

【讨论】：

【解决方案3】：

我喜欢使用 ng-repeat 来清楚地显示你正在选择/取消选择的内容，基本上你最终会得到一个不错的小对象来作为它的基础，并且添加它会更容易。

这是一个Plunker

*还要注意如何实现allSelected？使用循环函数而不是大量 html，我相信这可以用更少的意大利面来完成，但它可以工作 *

app.controller('MainCtrl', function($scope) {

$scope.allSelected = false;

$scope.checkboxes = [{label: 'Option 1',checked: true}, {label: 'Option 2'}}}];

$scope.cbChecked = function(){
  $scope.allSelected = true;
  angular.forEach($scope.checkboxes, function(v, k) {
    if(!v.checked){
      $scope.allSelected = false;
    }
  });
}
$scope.toggleAll = function() {
    var bool = true;
    if ($scope.allSelected) {
      bool = false;
    }
    angular.forEach($scope.checkboxes, function(v, k) {
      v.checked = !bool;
      $scope.allSelected = !bool;
      });
   }
});

【讨论】：