La tarea es obtener el estado de las casillas de verificación con la ayuda de AngularJS.
Acercarse:
- ng-model se usa para obtener las casillas de verificación seleccionadas.
- Simplemente establezca los diferentes valores en el modelo ng y se usarán para verificar si el elemento está seleccionado o no.
- Aparecerá una alerta para las casillas de verificación seleccionadas con valores verdaderos.
Ejemplo 1:
HTML
<!DOCTYPE HTML> <html> <head> <script src= "https://ajax.googleapis.com/ajax/libs/angularjs/1.2.13/angular.min.js"> </script> <script> var myApp = angular.module("app", []); myApp.controller("controller", function ($scope) { $scope.selCheckboxes = ''; $scope.getSelCheckB = function (myCheckbox) { alert(JSON.stringify(myCheckbox)); }; }); </script> </head> <body style="text-align:center;"> <h1 style="color:green;"> GeeksForGeeks </h1> <p> Alternative of ng-checked to get the checkbox's state in AngularJS </p> <div ng-app="app"> <div ng-controller="controller"> <form action="javascript:void(0)"> Checkbox1 : <input type="checkbox" name="checkbox1" ng-model='myCheckbox.val1' /> <br /> Checkbox2 : <input type="checkbox" name="checkbox2" ng-model='myCheckbox.val2' /><br /> Checkbox3 : <input type="checkbox" name="checkbox3" ng-model='myCheckbox.val3' /><br /> Checkbox4 : <input type="checkbox" name="checkbox4" ng-model='myCheckbox.val4' /><br /> <br> <button ng-click="getSelCheckB(myCheckbox)"> Click </button> </form> </div> </div> </body> </html>
Producción:
- Antes de hacer clic en el botón:
- Después de hacer clic en el botón:
Ejemplo 2:
HTML
<!DOCTYPE HTML> <html> <head> <script src= "https://ajax.googleapis.com/ajax/libs/angularjs/1.2.13/angular.min.js"> </script> <script> var myApp = angular.module("app", []); myApp.controller("controller", function ($scope) { $scope.selCheckboxes = ''; $scope.getSelCheckB = function (myCheckbox) { $scope.selCheckboxes = angular.copy(myCheckbox); }; }); </script> </head> <body style="text-align:center;"> <h1 style="color:green;"> GeeksForGeeks </h1> <p> Alternative of ng-checked to get the checkbox's state in AngularJS </p> <div ng-app="app"> <div ng-controller="controller"> <form action="javascript:void(0)"> Checkbox1 : <input type="checkbox" name="checkbox1" ng-model='myCheckbox.val1' /> <br /> Checkbox2 : <input type="checkbox" name="checkbox2" ng-model='myCheckbox.val2' /><br /> Checkbox3 : <input type="checkbox" name="checkbox3" ng-model='myCheckbox.val3' /><br /> Checkbox4 : <input type="checkbox" name="checkbox4" ng-model='myCheckbox.val4' /><br /> <br> <button ng-click="getSelCheckB(myCheckbox)"> Click </button> </form> <p>Selected Checkboxes = {{selCheckboxes | json}}</p> </div> </div> </body> </html>
Producción:
Publicación traducida automáticamente
Artículo escrito por PranchalKatiyar y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA