角度复选框“全选"最初仅选择一个框的功能 [英] Angular Checkboxes "Select All" functionality with only one box selected initially

问题描述

我有一个包含 3 个复选框的表单:全选"、选项 1"和选项 2".

<input type="checkbox" ng-model="selectAll" >全选<br><input type="checkbox" ng-checked="selectAll" 选中>选项1<br><input type="checkbox" ng-checked="selectAll">选项2</表单>

在初始页面加载时，我希望仅选项 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"><div ng-app="app" ng-controller="ctrl"><form id="selectionForm"><input type="checkbox" ng-click="toggleAll()" ng-model="isAllSelected">全选<br><div ng-repeat = "选项中的选项"><input type="checkbox" ng-model="option.selected" ng-change="optionToggled()">{{option.value}}

</表单>{{选项}}

I have a form that contains 3 checkboxes: "Select All", "Option 1", and "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>

On the initial page load I want only Option 1 to be checked. And then if the Select All checkbox gets checked it should automatically check Option 1 and Option 2 so all are selected.

The problem is on the initial page load the ng-checked="selectAll" gets evaluated which overrides my attempt to initially check only Option 1 (selectAll = false initially), so nothing is selected.

This seems like a simple problem to solve, but I can't figure out a solution... Thanks in advance for any insights or advice!

解决方案

Another way to go about it is to use a model for the options, set default selection in the model and have your controller handle the logic of doing select all.

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>

这篇关于角度复选框“全选"最初仅选择一个框的功能的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！