web-dev-qa-db-fra.com

Vérifier si la case à cocher est cochée ou non Angular

Comment vérifier si la case à cocher est sélectionnée/cochée dans cet exemple Angular? Ainsi, lorsque l'utilisateur sélectionne/coche la première case, je souhaite obtenir true et lorsqu'il désélectionne/désélectionne cette option, je souhaite false .

angular.module('app', [])
  .controller('Controller', function($scope) {
    $scope.toggleSelection = function toggleSelection() {
      // how to check if checkbox is selected or not

    };
  })
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="app" ng-controller="Controller">
  <h1>Get checkbox selection (true/false)</h1>
  <label>
    <input id="one" type="checkbox" ng-click="toggleSelection()">This
  </label>
  <br>
  <label>
    <input type="checkbox" ng-click="toggleSelection()">That
  </label>
  <br>
  <label>
    <input type="checkbox" ng-click="toggleSelection()">Lorem
  </label>
  <br>
  <label>
    <input type="checkbox" ng-click="toggleSelection()">Ipsum
  </label>
</div>
javascriptangularjs
8
akuljana

Ça marche:

angular.module('app', [])
      .controller('Controller', function($scope) {
        $scope.toggleSelection = function toggleSelection(event) {
          // how to check if checkbox is selected or not
          alert(event.target.checked);
        };
      })
<!DOCTYPE html>

<head>
  <script src="//cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.0/angular.min.js"></script>
  <script src="script.js"></script>
</head>

<body ng-app="app">
  <div ng-controller="Controller">
    <h1>Get checkbox selection (true/false)</h1>
    <label>
      <input type="checkbox" ng-click="toggleSelection($event)"> This
    </label>
    <br>
    <label>
      <input type="checkbox" ng-click="toggleSelection($event)"> That
    </label>
    <br>
    <label>
      <input type="checkbox" ng-click="toggleSelection($event)"> Lorem
    </label>
    <br>
    <label>
      <input type="checkbox" ng-click="toggleSelection($event)"> Ipsum
    </label>
  </div>
</body>

</html>

15
Gaurav Srivastava

Je suggérerais que vous utilisiez ng-model à la place.

<input type="checkbox" ng-model="checkbox1">

Ensuite, dans votre contrôleur, $scope.checkbox1 sera vrai ou faux, que la case soit cochée ou non.

if($scope.checkbox1){
    //Checkbox is checked
} else {
    //Checkbox is not checked
}
4
Amygdaloideum

Vous pouvez utiliser ng-model

angular.module('app', [])
      .controller('Controller', function($scope) {
       
        
      })
<!DOCTYPE html>

<head>
  <script src="//cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.0/angular.min.js"></script>
  <script src="script.js"></script>
</head>

<body ng-app="app">
  <div ng-controller="Controller">
    <h1>Get checkbox selection (true/false)</h1>
    <label>
      <input type="checkbox" ng-model="m1">   This:   {{m1}} 
    </label>
    <br>
    <label>
      <input type="checkbox" ng-model="m2"> That:  {{m2}} 
    </label>
    <br>
    
  </div>
</body>

</html>

4
Tran Thien Chien

Utilisez ng-model pour lier une variable à la case à cocher à laquelle vous pouvez accéder dans votre fonction $scope.toggleSelection. Voici la mise en place

angular.module('app', [])
  .controller('Controller', function($scope) {
    $scope.toggleSelection = function toggleSelection() {
       console.log($scope.firstCheckBox);    
    };
  })

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="app" ng-controller="Controller">
  <h1>Get checkbox selection (true/false)</h1>
  <label>
    <input id="one" type="checkbox" ng-click="toggleSelection()" ng-model="firstCheckBox">This
  </label>
  <br>
  <label>
    <input type="checkbox" ng-click="toggleSelection()">That
  </label>
  <br>
  <label>
    <input type="checkbox" ng-click="toggleSelection()">Lorem
  </label>
  <br>
  <label>
    <input type="checkbox" ng-click="toggleSelection()">Ipsum
  </label>
</div>
0
Prabhjot Rai