AngularJS 表单
AngularJS 中的表单提供了输入控件的数据绑定和验证。
输入控件
输入控件是 HTML 输入元素：
- 输入元素
- 选择元素
- 按钮元素
- 文本区域元素
数据绑定
输入控件通过使用 ng-model 指令提供数据绑定。
<input type="text" ng-model="firstname">
应用程序现在有一个名为 firstname 的属性。
ng-model 指令将输入控制器绑定到应用程序的其余部分。
属性 firstname 可以在控制器中引用：
示例
<script>
var app = angular.module('myApp', []);
app.controller('formCtrl', function($scope) {
$scope.firstname = "John";
});
</script>
自己动手试一试 »
它也可以在应用程序的其他地方引用：
复选框
复选框的值为 true 或 false。将 ng-model 指令应用于复选框，并在您的应用程序中使用其值。
示例
如果复选框被选中，则显示标题：
<form>
勾选以显示标题
<input type="checkbox" ng-model="myVar">
</form>
<h1 ng-show="myVar">我的标题</h1>
自己动手试一试 »
单选按钮
使用 ng-model 指令将单选按钮绑定到您的应用程序。
具有相同 ng-model 的单选按钮可以有不同的值，但只会使用选定的那个。
示例
根据选定单选按钮的值显示一些文本：
<form>
选择一个主题
<input type="radio" ng-model="myVar" value="dogs">狗
<input type="radio" ng-model="myVar" value="tuts">教程
<input type="radio" ng-model="myVar" value="cars">汽车
</form>
自己动手试一试 »
myVar 的值将是 dogs、tuts 或 cars。
选择框
使用 ng-model 指令将选择框绑定到您的应用程序。
ng-model 属性中定义的属性将具有选择框中选定选项的值。
示例
根据选定选项的值显示一些文本：
<form>
选择一个主题
<select ng-model="myVar">
<option value="">
<option value="dogs">狗
<option value="tuts">教程
<option value="cars">汽车
</select>
</form>
自己动手试一试 »
myVar 的值将是 dogs、tuts 或 cars。
一个 AngularJS 表单示例
表单 = {{user}}
主控 = {{master}}
应用程序代码
<div ng-app="myApp" ng-controller="formCtrl">
<form novalidate>
名:<br>
<input type="text" ng-model="user.firstName"><br>
姓:<br>
<input type="text" ng-model="user.lastName">
<br><br>
<button ng-click="reset()">重置</button>
</form>
<p>表单 = {{user}}</p>
<p>主控 = {{master}}</p>
</div>
<script>
var app = angular.module('myApp', []);
app.controller('formCtrl', function($scope) {
$scope.master = {firstName: "John", lastName: "Doe"};
$scope.reset = function() {
$scope.user = angular.copy($scope.master);
};
$scope.reset();
});
</script>
自己动手试一试 »
novalidate 属性是 HTML5 中的新功能。它禁用任何默认的浏览器验证。
示例解释
ng-app 指令定义了 AngularJS 应用程序。
ng-controller 指令定义了应用程序控制器。
ng-model 指令将两个输入元素绑定到模型中的 user 对象。
formCtrl 控制器为 master 对象设置初始值，并定义了 reset() 方法。
reset() 方法将 user 对象设置为等于 master 对象。
ng-click 指令仅在点击按钮时调用 reset() 方法。
此应用程序不需要 novalidate 属性，但通常您会在 AngularJS 表单中使用它来覆盖标准 HTML5 验证。
