Angular Checks "Select All(모두 선택)" 기능(처음에는 한 상자만 선택)

Angular Checks "Select All(모두 선택)" 기능(처음에는 한 상자만 선택)

"Select All(모두 선택)", "Option 1(옵션 1)" 및 "Option 2(옵션 2)"의 3개의 체크박스가 포함된 폼이 있습니다.

<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]체크박스를 켜면 옵션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>

이것을 시험해 보세요.

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

저는 선택/선택 해제 내용을 명확하게 하기 위해 ng-repeat을 사용하고 싶습니다.기본적으로 모든 것을 기반으로 하는 작고 멋진 오브젝트가 생깁니다.그것에 추가하는 것은 간단합니다.

여기 플런커가 있다

*또한 모든 것을 선택할 수 있는 방법에 주목해 주십시오.loop func와 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;
      });
   }
});

언급URL : https://stackoverflow.com/questions/27451954/angular-checkboxes-select-all-functionality-with-only-one-box-selected-initial