Html “角度复选框”；选择全部"；最初仅选择一个框的功能

我有一个表单，其中包含3个复选框：“全选”、“选项1”和“选项2”

全选


选择1


选择2

在初始页面加载时，我只希望选中选项1。然后，如果选中了全选复选框，则应自动选中选项1和选项2，以便全部选中

问题是在初始页面加载时，会对ng checked=“selectAll”进行评估，这会覆盖我最初仅检查选项1的尝试（selectAll=false），因此不会选择任何内容

这似乎是一个需要解决的简单问题，但我想不出一个解决方案。。。提前感谢您提供的任何见解或建议

试试这个：

<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>

全选


选择1


选择2

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

angular.module（“app”，[]）.controller（“ctrl”，function（$scope）{
$scope.options=[
{value:'Option1'，selected:true}，
{value:'Option2'，selected:false}
];
$scope.toggleAll=function（）{
var toggleStatus=！$scope.isAllSelected；
forEach（$scope.options，function（itm）{itm.selected=toggleStatus；}）；
}
$scope.optionToggled=函数（）{
$scope.isAllSelected=$scope.options.every（函数（itm）{return itm.selected；}）
}
});

全选


{{option.value}}
{{options}}
我喜欢使用ng repeat来清楚地显示您正在选择/取消选择的内容，基本上，您最终会得到一个漂亮的小对象作为基础，并且添加到它更简单

这里有一个

*还要注意如何实现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;
      });
   }
});

这实际上是一个更好的方法。谢谢你的回答。这似乎是一种更加有角度的方式来实现这种类型的functionality@CumuloNimbus不客气。添加了一种方法，如果手动选中所有复选框，则自动选中selectAll复选框，反之亦然…@CumuloNimbus还注意到我正在使用，要在较旧的浏览器中工作，您需要添加链接的MDN文档中提到的垫片。@Cody:
ng change
表达式将不会计算，因为复选框模型值是通过编程方式更改的，而不是用户与复选框的交互。看见
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;
      });
   }
});