极客教程如何使用AngularJS获得单选按钮的值
在这篇文章中，我们将看到如何使用AngularJS获取单选按钮的值，并通过插图了解基本实现。单选按钮的值可以在ng-model指令的帮助下获取，该指令有助于将数据与特定的元素绑定，并将所需的值存储在一个变量中，当我们需要那个特定的值时就可以使用。
例子1：在这个例子中，点击按钮后，所选的值将被呈现出一个警告信息。
<!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>
<h3> How to get the radio button value in AngularJS </h3>
<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>
输出:
例子2：在这个例子中，所选的值显示在一个 <p>标签使用AngularJS中的插值。
<!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>
<h3> How to get the radio button value in AngularJS </h3>
<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>
输出:
