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
"
>
</
form
>
<
h1
>
You 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
"
>
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
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 表单实例
form = {{user}}
master = {{master}}
应用程序代码
<
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
>
尝试一下 »
|
novalidate
属性是在 HTML5 中新增的。禁用了使用浏览器的默认验证。
|
实例解析
ng-app
指令定义了 AngularJS 应用。
ng-controller
指令定义了应用控制器。
ng-model
指令绑定了两个 input 元素到模型的
user
对象。
formCtrl
函数设置了
master
对象的初始值,并定义了
reset()
方法。
reset()
方法设置了
user
对象等于
master
对象。
ng-click
指令调用了
reset()
方法,且在点击按钮时调用。
novalidate 属性在应用中不是必须的,但是你需要在 AngularJS 表单中使用,用于重写标准的 HTML5 验证。