web-dev-qa-db-fra.com

Angular Cases à cocher Fonctionnalité "Tout sélectionner" avec une seule case sélectionnée initialement

J'ai un formulaire qui contient 3 cases à cocher: "Tout sélectionner", "Option 1" et "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>

Sur le chargement initial de la page, je veux seulement Option 1 être coché. Et puis, si la case Tout sélectionner est cochée, elle devrait automatiquement cocher Option 1 et Option 2 afin que tous soient sélectionnés.

Le problème est sur la page initiale de chargement, le ng-checked = "selectAll" est évalué, ce qui annule ma tentative de vérification initiale de l'option 1 (selectAll = false au départ), de sorte que rien n'est sélectionné.

Cela semble être un problème simple à résoudre, mais je ne peux pas trouver de solution ... Merci d'avance pour vos idées ou vos conseils!

htmlangularjscheckboxangularjs-ng-model
26
Cumulo Nimbus

Une autre façon de procéder consiste à utiliser un modèle pour les options, à définir la sélection par défaut dans le modèle et à laisser votre contrôleur gérer la logique de tout sélectionner.

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

J'aime utiliser ng-repeat pour montrer plus clairement ce que vous sélectionnez/désélectionnez. En gros, vous vous retrouvez avec un joli petit objet sur lequel baser tout cela, et l'ajouter est simplement plus facile.

Voici un Plunker

* Notez également comment vous pouvez réaliser tous les sélections? avec une boucle func et pas une tonne de HTML, et je suis sûr que cela peut être fait avec moins de spaghettis mais cela fonctionne *

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

Essaye ça:

<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