AngularJS 表单
AngularJS 表单是输入控件的集合。
HTML 控件
以下 HTML input 元素被称为 HTML 控件:
- input 元素
- select 元素
- button 元素
- textarea 元素
数据绑定
Input 控件使用 ng-model 指令来实现数据绑定。
<input type="text" ng-model="firstname">
通过以上代码应用有了一个名为 firstname 的属性。
它通过 ng-model 指令来绑定到你的应用。
firstname 属性可以在 controller 中使用：
实例
var app = angular.module(myApp, []);
app.controller(formCtrl, function($scope) {
$scope.firstname = "John";
});
也可以在应用的其他地方使用:实例form First Name: input type="text" ng-model="firstname" /formh1You entered: {{firstname}}/h1
Checkbox（复选框）
checkbox 的值为 true 或 false，可以使用 ng-model 指令绑定，它的值可以用于应用中：
实例
复选框选中后显示 h1 标签内容：
<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选择一个选项:input type="radio" ng-model="myVar" value="dogs"Dogsinput type="radio" ng-model="myVar" value="tuts"Tutorialsinput type="radio" ng-model="myVar" value="cars"Cars /form
myVar 的值可以是 dogs, tuts, 或 cars。
下拉菜单
使用 ng-model 指令可以将下拉菜单绑定到你的应用中。
ng-model 属性的值为你在下拉菜单选中的选项：
实例
根据选中的下拉菜单选项，显示信息：
<form>
选择一个选项:
<select ng-model="myVar">
<option value="">
<option value="dogs">Dogs
<option value="tuts">Tutorials
<option value="cars">Cars
</select>
</form>
myVar 的值可以是 dogs, tuts, 或 cars。HTML 表单HTML 表单通常与 HTML 控件同时存在。 AngularJS 表单实例 First Name: Last Name: RESET form = {{user}} master = {{master}}angular.module(myEx, []).controller(ExampleController, function($scope) { $scope.master = {"firstName":"John","lastName":"Doe"}; $scope.reset = function() { $scope.user = angular.copy($scope.master); }; $scope.reset();});应用程序代码div ng-app="myApp" ng-controller="formCtrl"form novalidateFirst Name:brinput type="text" ng-model="user.firstName"brLast Name:brinput type="text" ng-model="user.lastName"brbrbutton ng-click="reset()"RESET/button/formpform = {{user}}/ppmaster = {{master}}/p /divscript 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 指令绑定了两个 input 元素到模型的 user 对象。
formCtrl 函数设置了master 对象的初始值，并定义了 reset() 方法。
reset() 方法设置了 user 对象等于 master 对象。
ng-click 指令调用了 reset() 方法，且在点击按钮时调用。
novalidate 属性在应用中不是必须的，但是你需要在 AngularJS 表单中使用，用于重写标准的 HTML5 验证。
王皓
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat王皓
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat王皓
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat