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>
亲自试一试 »
也可以在申请的其他地方引用：
示例
<form>
First Name: <input type="text" ng-model="firstname">
</form>
<h1>You entered: {{firstname}}</h1>
亲自试一试 »
复选框
复选框具有值true或者false。应用ng-model指令到复选框，并在您的应用程序中使用它的值。
示例
如果选中该复选框，则显示标题：
<form>
Check to show a header:
<input type="checkbox" ng-model="myVar">
</form>
<h1 ng-show="myVar">My Header</h1>
亲自试一试 »
单选按钮
使用以下命令将单选按钮绑定到您的应用程序ng-model指示。
具有相同功能的单选按钮ng-model可以有不同的值，但只会使用选定的值。
示例
根据所选单选按钮的值显示一些文本：
<form>
Pick a topic:
<input type="radio" ng-model="myVar" value="dogs">Dogs
<input type="radio" ng-model="myVar" value="tuts">Tutorials
<input type="radio" ng-model="myVar" value="cars">Cars
</form>
亲自试一试 »
myVar 的值可以是dogs,tuts， 或者cars。
选择框
使用以下命令将选择框绑定到您的应用程序ng-model指示。
中定义的属性ng-model属性将具有选择框中所选选项的值。
示例
根据所选选项的值显示一些文本：
<form>
Select a topic:
<select ng-model="myVar">
<option value="">
<option value="dogs">Dogs
<option value="tuts">Tutorials
<option value="cars">Cars
</select>
</form>
亲自试一试 »
myVar 的值可以是dogs,tuts， 或者cars。
AngularJS 表单示例
表单 = {{用户}}
大师 = {{大师}}
应用代码
<div ng-app="myApp" ng-controller="formCtrl">
<form novalidate>
First Name:<br>
<input type="text" ng-model="user.firstName"><br>
Last Name:<br>
<input type="text" ng-model="user.lastName">
<br><br>
<button ng-click="reset()">RESET</button>
</form>
<p>form = {{
user}}</p>
<p>master = {{
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>
亲自试一试 »
这个不验证属性是 HTML5 中的新属性。它禁用任何默认浏览器验证。
示例解释
这个NG应用程序指令定义 AngularJS 应用程序。
这个NG控制器指令定义应用程序控制器。
这个ng-模型指令将两个输入元素绑定到用户模型中的对象。
这个表单控件控制器将初始值设置为掌握对象，并定义重置（）方法。
这个重置（）方法设置用户对象等于掌握目的。
这个NG-点击指令调用重置（）方法，仅当单击按钮时。
此应用程序不需要 novalidate 属性，但通常您会在 AngularJS 表单中使用它来覆盖标准 HTML5 验证。