如何使用 AngularJS 获取单选按钮的值？

AngularJS 是一个流行的前端 JavaScript 框架，用于构建动态 Web 应用程序。在许多情况下，我们需要获取表单元素的值，特别是单选按钮，以便将数据传递到后端或做其他处理。在本文中，我们将介绍如何使用 AngularJS 获取单选按钮的值。

在 HTML 中定义单选按钮

使用 AngularJS 获取单选按钮的值之前，我们需要在 HTML 中定义单选按钮。以下是一个示例：

<form ng-app="myApp" ng-controller="myCtrl">
  <label>
    <input type="radio" name="gender" value="Male" ng-model="gender">
    Male
  </label>
  <label>
    <input type="radio" name="gender" value="Female" ng-model="gender">
    Female
  </label>
  <br>
  <button ng-click="getGender()">Get Gender</button>
</form>

在上面的示例中，我们定义了两个单选按钮，用于选择“Male”或“Female”。ng-model 指令将单选按钮的值绑定到 $scope 变量 gender 上。

获取单选按钮的值

一旦我们定义了单选按钮和绑定的 ng-model，我们可以在控制器中使用 $scope 变量来获取单选按钮的值。以下是一个示例：

var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
  $scope.getGender = function() {
    alert($scope.gender);
  };
});

在上面的示例中，我们定义了一个控制器 myCtrl，并在其中定义了 getGender 函数。当用户单击“Get Gender”按钮时，getGender 函数将弹出用户选择的单选按钮的值。

结论

使用 AngularJS 获取单选按钮的值非常简单。只需要在 HTML 中定义单选按钮，并使用 ng-model 指令将其绑定到 $scope 变量中。然后，在控制器中使用 $scope 变量来获取单选按钮的值。