web-dev-qa-db-ja.com

Angular最初に1つのボックスのみが選択されたチェックボックス「すべて選択」機能

「すべて選択」、「オプション1」、および「オプション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>

最初のページの読み込みで、onlyOption 1をチェックしたい。そして、すべて選択チェックボックスがオンになっている場合、自動的にオプション1およびオプション2がチェックされるため、すべてが選択されます。

問題は、ng-checked = "selectAll"が初期ページの読み込み時に評価されるため、オプション1（最初はselectAll = false）のみを最初にチェックしようとする試みが無効になるため、何も選択されません。

これは簡単に解決できる問題のように思えますが、解決策がわかりません...洞察やアドバイスを事前に感謝します！

htmlangularjscheckboxangularjs-ng-model
26
Cumulo Nimbus

これを回避する別の方法は、オプションにモデルを使用し、モデルでデフォルトの選択を設定し、コントローラーがすべてを選択するロジックを処理することです。

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

私はng-repeatを使用して、選択/選択解除しているものを明確に表示するのが好きです。基本的には、すべてをベースにするニースの小さなオブジェクトになりますが、追加するのは簡単です。

ここにPlunker

* allSelectedを達成する方法にも注意してください。たくさんのhtmlではなくループfuncを使用します。これは少ないスパゲッティで実行できると確信していますが、動作します*

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;
      });
   }
});
5
Dylan

これを試して：

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