28

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

最初のページの読み込みでは、オプション 1のみ をチェックしたいと思います。次に、[すべて選択] チェックボックスがオンになっている場合は、オプション 1とオプション 2が自動的にオンになり、すべてが選択されます。

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

これは解決するのが簡単な問題のように思えますが、解決策がわかりません...洞察やアドバイスをよろしくお願いします!

4

3 に答える 3

85

もう 1 つの方法は、オプションにモデルを使用し、モデルでデフォルトの選択を設定し、コントローラにすべてを選択するロジックを処理させることです。

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>

于 2014-12-12T21:20:06.690 に答える
5

これを試して：

<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>
于 2014-12-12T21:11:13.807 に答える