¿Cómo configurar el botón de opción marcado al hacer clic en el botón en AngularJS?

En este artículo, veremos cómo configurar el botón de radio marcado al hacer clic en el botón en AngularJS.

Enfoque: el enfoque es usar ng-checked para verificar el botón de opción en el DOM. En el primer ejemplo, el botón verifica un solo botón de opción y en el segundo ejemplo, el botón verifica varios botones de opción. ng-mode l se usa para vincular los botones de opción.

Ejemplo 1:

<!DOCTYPE HTML>
<html>
  
<head>
    <script src=
"//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.radioCh = function () {
                if (!$scope.radio) {
                    $scope.radio = true;
                } else {
                    $scope.radio = false;
                }
            }
        });
    </script>
</head>
  
<body style="text-align:center;">
    <h1 style="color:green;">
        GeeksForGeeks
    </h1>
    <p>
        How to set radio button checked
        by button click in AngularJS
    </p>
  
    <div ng-app="app">
        <div ng-controller="controller">
            Radio button: <input type="radio" 
                    ng-checked="radio">
            <br><br>
            <button ng-click="radioCh()" 
                    ng-model='radio'>
                Click here
            </button>
            <br><br>
        </div>
    </div>
</body>
  
</html>

Producción:

Ejemplo 2:

<!DOCTYPE HTML>
<html>
  
<head>
    <script src=
"//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.radioCh = function () {
                if (!$scope.radio) {
                    $scope.radio = true;
                } else {
                    $scope.radio = false;
                }
            }
        });
    </script>
</head>
  
<body style="text-align:center;">
    <h1 style="color:green;">
        GeeksForGeeks
    </h1>
    <p>
        How to set radio button checked
        by button click in AngularJS
    </p>
    <div ng-app="app">
        <div ng-controller="controller">
            Radio button 1: <input type="radio" 
                ng-checked="radio">
            <br><br>
  
            Radio button 2: <input type="radio" 
                    ng-checked="radio">
            <br><br>
  
            Radio button 3: <input type="radio" 
                    ng-checked="radio">
            <br><br>
  
            <button ng-click="radioCh()" 
                    ng-model='radio'>
                Click here
            </button>
            <br><br>
        </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 *