Alternativa de ng-checked para obtener el estado de la casilla de verificación en AngularJS

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

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *