AngularJS 表单
AngularJS 中的表单提供了输入控件的数据绑定和验证。
输入控件
输入控件是 HTML 输入元素
- 输入元素
- 选择元素
- 按钮元素
- 文本区域元素
数据绑定
输入控件通过使用 ng-model 指令提供数据绑定。
<input type="text" ng-model="firstname">
现在应用程序有一个名为 firstname 的属性。
The ng-model directive binds the input controller to the rest of your application.
属性 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 表单示例
form = {{user}}
master = {{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>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>
尝试一下 »
novalidate 属性是 HTML5 中的新属性。它禁用任何默认的浏览器验证。
示例解释
ng-app 指令定义了 AngularJS 应用程序。
ng-controller 指令定义了应用程序控制器。
ng-model 指令将两个输入元素绑定到模型中的 user 对象。
formCtrl 控制器将初始值设置到 master 对象，并定义 reset() 方法。
reset() 方法将 user 对象设置为等于 master 对象。
ng-click 指令仅在按钮被点击时调用 reset() 方法。
novalidate 属性对于这个应用程序来说不是必需的，但通常你会在 AngularJS 表单中使用它，以覆盖标准的 HTML5 验证。
