html – 角度复选框“全选”功能,最初只能选择一个框

我有一个包含3个复选框的窗体：“全选”,“选项1”和“选项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.然后如果选中所有复选框被选中,它应该自动检查选项1和选项2,以便选择所有.

问题是在初始页面上加载ng-checked =“selectAll”被评估,这会覆盖我最初只检查选项1(selectAll = false最初)的尝试,因此没有选择任何内容.

这似乎是一个简单的问题要解决,但我无法找出解决方案…提前感谢任何见解或建议！

解决方法

另一种方法是使用模型的选项,在模型中设置默认选择,并让您的控制器处理所有选择的逻辑.

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>

html – 角度复选框“全选”功能,最初只能选择一个框

解决方法

猜你在找的HTML相关文章