如何使用 AngularJS 获取表单输入值？

AngularJS 是一款流行的 JavaScript 框架，它可以很方便地获取和处理表单输入值。本文将介绍如何使用 AngularJS 获取表单输入值。

1. 使用 ng-model 指令获取输入值

在 HTML 表单中，可以使用 ng-model 指令来绑定表单控件和作用域中的属性。当表单控件的值发生变化时，作用域中的属性也会相应地更新。因此，可以通过访问作用域中的属性来获取表单输入值。

下面是一个示例：

<div ng-app="myApp" ng-controller="myCtrl">
  <form>
    <label>姓名:</label>
    <input type="text" ng-model="name"><br>

    <label>年龄:</label>
    <input type="number" ng-model="age"><br>

    <label>性别:</label>
    <input type="radio" ng-model="gender" value="male">男
    <input type="radio" ng-model="gender" value="female">女<br>

    <button type="button" ng-click="submit()">提交</button>
  </form>
</div>

<script>
angular.module('myApp', [])
  .controller('myCtrl', function($scope) {
    $scope.submit = function() {
      console.log('姓名：' + $scope.name);
      console.log('年龄：' + $scope.age);
      console.log('性别：' + $scope.gender);
    };
  });
</script>

在上面的示例中，使用 ng-model 指令绑定了三个表单控件和作用域中的三个属性 name、age 和 gender。在点击“提交”按钮时，调用了 submit 函数，通过访问作用域中的属性来获取表单输入值，并在控制台中输出了这些值。

2. 使用 ng-submit 指令获取整个表单数据

除了使用 ng-model 指令获取表单控件的值之外，还可以使用 ng-submit 指令获取整个表单数据。当表单提交时，ng-submit 指令会调用作用域中的函数，并将表单数据传递给该函数。

下面是一个示例：

<div ng-app="myApp" ng-controller="myCtrl">
  <form ng-submit="submit(formData)">
    <label>姓名:</label>
    <input type="text" ng-model="formData.name"><br>

    <label>年龄:</label>
    <input type="number" ng-model="formData.age"><br>

    <label>性别:</label>
    <input type="radio" ng-model="formData.gender" value="male">男
    <input type="radio" ng-model="formData.gender" value="female">女<br>

    <button type="submit">提交</button>
  </form>
</div>

<script>
angular.module('myApp', [])
  .controller('myCtrl', function($scope) {
    $scope.formData = {};

    $scope.submit = function(formData) {
      console.log('姓名：' + formData.name);
      console.log('年龄：' + formData.age);
      console.log('性别：' + formData.gender);
    };
  });
</script>

在上面的示例中，使用 ng-model 指令和一个 formData 对象来绑定表单控件和作用域中的属性。在表单提交时，调用了 submit 函数，并将 formData 对象作为参数传递给该函数，从而获取表单数据。在控制台中输出了这些数据。

3. 使用 $event 对象获取事件源

在某些情况下，需要获取事件源，即触发表单提交的元素。可以使用 $event 对象来获取该元素。

下面是一个示例：

<div ng-app="myApp" ng-controller="myCtrl">
  <form ng-submit="submit(formData, $event)">
    <label>姓名:</label>
    <input type="text" ng-model="formData.name"><br>

    <label>年龄:</label>
    <input type="number" ng-model="formData.age"><br>

    <label>性别:</label>
    <input type="radio" ng-model="formData.gender" value="male">男
    <input type="radio" ng-model="formData.gender" value="female">女<br>

    <button type="submit">提交</button>
  </form>
</div>

<script>
angular.module('myApp', [])
  .controller('myCtrl', function($scope) {
    $scope.formData = {};

    $scope.submit = function(formData, event) {
      console.log('姓名：' + formData.name);
      console.log('年龄：' + formData.age);
      console.log('性别：' + formData.gender);
      console.log('事件源：' + event.target.tagName);
    };
  });
</script>

在上面的示例中，除了传递 formData 对象之外，还将 $event 对象作为第二个参数传递给了 submit 函数。在函数内部，通过访问 $event.target 属性来获取事件源的标签名，并在控制台中输出了该标签名。

总结

AngularJS 提供了多种方式来获取表单输入值，包括使用 ng-model 指令、ng-submit 指令、$event 对象等。开发人员可以根据具体需求选择适合自己的方式。