En este artículo, veremos cómo obtener el valor del botón de opción con la ayuda de AngularJS. En este artículo, usaremos el modelo ng para obtener el valor del botón de opción marcado .
Ejemplo 1: En este ejemplo, el valor seleccionado se muestra con una alerta.
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.selectedGender = '';
$scope.getVal = function (gender) {
alert(gender);
};
});
</script>
</head>
<body style="text-align:center;">
<h1 style="color:green;">
GeeksForGeeks
</h1>
<p>
How to get the radio button
value in AngularJS
</p>
<div ng-app="app">
<div ng-controller="controller">
<form action="javascript:void(0)">
Male: <input type="radio"
name="userGender"
ng-model='gender'
value="Male" />
<br>
Female : <input type="radio"
name="userGender"
ng-model='gender'
value="Female" />
<br>
<br>
<button ng-click="getVal(gender)">
Click here
</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: En este ejemplo, el valor seleccionado se muestra en una etiqueta <p>.
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.selGender = '';
$scope.getVal = function (gender) {
$scope.selGender = angular.copy(gender);
};
});
</script>
</head>
<body style="text-align:center;">
<h1 style="color:green;">
GeeksForGeeks
</h1>
<p>
How to get the radio button
value in AngularJS
</p>
<div ng-app="app">
<div ng-controller="controller">
<form action="javascript:void(0)">
Male: <input type="radio"
name="userGender"
ng-model='gender'
value="Male" />
<br>
Female : <input type="radio"
name="userGender"
ng-model='gender'
value="Female" />
<br>
<br>
<button ng-click="getVal(gender)">
Click here
</button>
</form>
<p>Chosen Gender = {{selGender}}</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