1 ng-model的使用
ng-model指令：进行数据的双向绑定
<input@H_502_9@ type@H_502_9@="text"@H_502_9@ ng-model@H_502_9@="ctrl.username"@H_502_9@>@H_502_9@ You typed @H_502_9@{{ctrl.username@H_502_9@}}@H_502_9@@H_502_9@
angular.module('notesApp'@H_502_9@,[])
.controller('MainCtrl'@H_502_9@,[function@H_502_9@ ()@H_502_9@ {@H_502_9@
this@H_502_9@.username = 'nothing'@H_502_9@;
}]);
2 表单的使用
<form ng-submit="ctrl.submit();"@H_502_9@>
<input type@H_502_9@=@H_502_9@"text"@H_502_9@ ng-model="ctrl.user.username"@H_502_9@>
<input type@H_502_9@=@H_502_9@"password"@H_502_9@ ng-model="ctrl.user.password"@H_502_9@>
<input type@H_502_9@=@H_502_9@"submit"@H_502_9@ value@H_502_9@="submit"@H_502_9@>
</form>
var@H_502_9@ self@H_502_9@ = this;
self@H_502_9@.submit = function@H_502_9@ ()@H_502_9@ {@H_502_9@
console.log('User clicked submit with '@H_502_9@,self@H_502_9@.user);
};
3 使用数据绑定和模型
HTML:
<form ng-submit="ctrl.submit1();"@H_502_9@>
<input type@H_502_9@=@H_502_9@"text"@H_502_9@ ng-model="ctrl.username"@H_502_9@>
<input type@H_502_9@=@H_502_9@"password"@H_502_9@ ng-model="ctrl.password"@H_502_9@>
<input type@H_502_9@=@H_502_9@"submit"@H_502_9@ value@H_502_9@="submit"@H_502_9@>
</form>
<form ng-submit="ctrl.submit2();"@H_502_9@>
<input type@H_502_9@=@H_502_9@"text"@H_502_9@ ng-model="ctrl.user.username"@H_502_9@>
<input type@H_502_9@=@H_502_9@"password"@H_502_9@ ng-model="ctrl.user.password"@H_502_9@>
<input type@H_502_9@=@H_502_9@"submit"@H_502_9@ value@H_502_9@="submit"@H_502_9@>
</form>
JS:
var@H_502_9@ self@H_502_9@ = this;
self@H_502_9@.submit1 = function@H_502_9@ ()@H_502_9@ {@H_502_9@
//创建了一个代表用户的对象并发送给服务器@H_502_9@
var@H_502_9@ user = {username:self@H_502_9@.username,password:self@H_502_9@.password};
console.log('First form submit with '@H_502_9@,user);
};
self@H_502_9@.submit2 = function@H_502_9@ ()@H_502_9@ {@H_502_9@
console.log('Second form submit with '@H_502_9@,self@H_502_9@.user);
};
4 表单状态及验证
HTML
<form@H_502_9@ ng-submit@H_502_9@="ctrl.submit();"@H_502_9@ name@H_502_9@="myForm"@H_502_9@>@H_502_9@
<input@H_502_9@ type@H_502_9@="text"@H_502_9@ ng-model@H_502_9@="ctrl.user.username"@H_502_9@ required@H_502_9@ ng-minlength@H_502_9@="4"@H_502_9@>@H_502_9@
<input@H_502_9@ type@H_502_9@="password"@H_502_9@ ng-model@H_502_9@="ctrl.user.password"@H_502_9@ required@H_502_9@>@H_502_9@
<input@H_502_9@ type@H_502_9@="submit"@H_502_9@ value@H_502_9@="Submit"@H_502_9@ ng-disabled@H_502_9@="myForm.$invalid"@H_502_9@>@H_502_9@<!-- 通过表单名访问表单状态 -->@H_502_9@
</form@H_502_9@>@H_502_9@
JS
angular.module('notesApp'@H_502_9@,[function@H_502_9@ ()@H_502_9@ {@H_502_9@
var@H_502_9@ self@H_502_9@ = this;
self@H_502_9@.submit = function@H_502_9@ ()@H_502_9@ {@H_502_9@
console.log('User clicked submit with '@H_502_9@,self@H_502_9@.user);
};
}]);
4.1 AngularJS中表单的状态属性
| 表单状态名 | 作用 |
|---|---|
| $@H_502_9@invalid | 一旦有任何验证没有通过(包括必须验证、最小长度验证等)，AngularJS就会为表单设置$@H_502_9@invalid属性 |
| $@H_502_9@valid | 与$@H_502_9@invalid状态正好相反，它表示所有验证都通过了 |
| $@H_502_9@pristine | AngularJS中所有的表单状态都是$@H_502_9@pristine。它代表了用户是否已经输入或者修改过表单元素。可能的用途：当表单处于$@H_502_9@pristine状态时，让reset按钮不可用(disabe) |
| $@H_502_9@dirty | 和$@H_502_9@pristine正好相反，它表示用户已经修改了数据(用户可以撤销修改内容,但dirty属性已经被设置了) |
| $@H_502_9@error | 它为每一个表单提供了如下信息：哪些输入控件出现了错误以及错误类型。 |
4.2 AngularJS内置的验证器
| 验证器 | 作用 |
|---|---|
| required | 确保内容不为空，直到填入相应内容之前，这个字段始终被标记称$invalid |
| ng-required | required要求字段始终非空，而ng-required则不同，它根据表达式的返回值俩决定字段是否是必须的 |
| ng-minlength | 字符的最小长度 |
| ng-maxlength | 字符的最大长度 |
| g-pattern | 字段必须匹配某个正则表达式 |
| type=”email” | 字段必须是一个合法的邮件地址 |
| type=”number” | 字段必须是一个有效的数字，还可以通过指定min和max属性来限制数字的范围 |
| type=”date” | 如果浏览器支持，那么该字段将会显示成一个HTML日期选择器。如果不支持，那么默认情况下它会显示成一个文本输入框ng-model中所绑定的字段，将会是yyyy-mm-dd格式的日期对象，比如2016-09-23 |
| type=”url” | 字段必须是一个合法的URL链接地址 |
5 显示错误信息
ng-show的使用
<form@H_502_9@ ng-submit@H_502_9@="ctrl.submit();"@H_502_9@ name@H_502_9@="myForm"@H_502_9@>@H_502_9@
<input@H_502_9@ type@H_502_9@="text"@H_502_9@ name@H_502_9@="uname"@H_502_9@ ng-model@H_502_9@="ctrl.user.username"@H_502_9@ required@H_502_9@ ng-minlength@H_502_9@="4"@H_502_9@>@H_502_9@
<span@H_502_9@ ng-show@H_502_9@="myForm.uname.$error.required"@H_502_9@>@H_502_9@
This is a required field
</span@H_502_9@>@H_502_9@
<span@H_502_9@ ng-show@H_502_9@="myForm.uname.$error.minlength"@H_502_9@>@H_502_9@
Minimum length required is 4
</span@H_502_9@>@H_502_9@
<span@H_502_9@ ng-show@H_502_9@="myForm.uname.$invalid"@H_502_9@>@H_502_9@
This field is invalid
</span@H_502_9@>@H_502_9@
<input@H_502_9@ type@H_502_9@="password"@H_502_9@ name@H_502_9@="pwd"@H_502_9@ ng-model@H_502_9@="ctrl.user.password"@H_502_9@ required@H_502_9@>@H_502_9@
<span@H_502_9@ ng-show@H_502_9@="myForm.pwd.$error.required"@H_502_9@>@H_502_9@
This is a required field
</span@H_502_9@>@H_502_9@
<input@H_502_9@ type@H_502_9@="submit"@H_502_9@ value@H_502_9@="Submit"@H_502_9@ ng-disabled@H_502_9@="myForm.$invalid"@H_502_9@>@H_502_9@
</form@H_502_9@>@H_502_9@
6 根据状态修改表单样式
6.1 表单状态CSS class
| 表单状态 | 对应的CSS class |
|---|---|
| $invalid | ng-invalid |
| $valid | ng-valid |
| $pristine | ng-pristine |
| $dirty | ng-dirty |
6.2 输入控件状态CSS class
| 输入控件状态 | 对应的CSS class |
|---|---|
| $invalid | ng-invalid |
| $valid | ng-valid |
| $pristine | ng-pristine |
| $dirty | ng-dirty |
| required | ng-valid-required or ng-invalid-required |
| min | ng-valid-min or ng-invalid-min |
| max | ng-valid-max or ng-invalid-max |
| minlength | ng-valid-minlength or ng-invalid-minlength |
| maxlength | ng-valid-maxlength or ng-invalid-maxlength |
| pattern | ng-valid-pattern or ng-invalid-pattern |
| url | ng-valid-url or ng-invalid-url |
| ng-valid-email or ng-invalid-email | |
| date | ng-valid-date or ng-invalid-date |
| number | ng-valid-number or ng-invalid-number |
6.3 不同方式高亮显示输入控件
HTML:
<form ng-submit="ctrl.submit();"@H_502_9@ name="myForm"@H_502_9@>
<input type@H_502_9@=@H_502_9@"text"@H_502_9@
class@H_502_9@="username"@H_502_9@
name="uname"@H_502_9@
ng-model="ctrl.user.username"@H_502_9@
required
ng-minlength="4"@H_502_9@>
<input type@H_502_9@=@H_502_9@"submit"@H_502_9@
value@H_502_9@="Submit"@H_502_9@
ng-disabled="myForm.$invalid"@H_502_9@>
</form>
CSS:
<style@H_502_9@>@H_502_9@ .username@H_502_9@.ng-valid@H_502_9@{ background-color@H_502_9@: green@H_502_9@@H_502_9@; }@H_502_9@@H_502_9@ .username@H_502_9@.ng-dirty@H_502_9@.ng-invalid-required@H_502_9@{ background-color@H_502_9@: red@H_502_9@@H_502_9@; }@H_502_9@@H_502_9@ .username@H_502_9@.ng-dirty@H_502_9@.ng-invalid-minlength@H_502_9@{ background-color@H_502_9@: lightpink@H_502_9@@H_502_9@; }@H_502_9@@H_502_9@ @H_502_9@</style@H_502_9@>@H_502_9@
JS:
angular.module('notesApp'@H_502_9@,[])
.controller('MainCtrl'@H_502_9@,[function@H_502_9@ ()@H_502_9@ {@H_502_9@
var@H_502_9@ self@H_502_9@ = this;
self@H_502_9@.submit = function@H_502_9@ ()@H_502_9@ {@H_502_9@
console.log('User clicked submit with '@H_502_9@,self@H_502_9@.user);
};
}]);
7 ng-form与内嵌表单
AngularJS提供了ng-form指令，它与form非常相近，同时又提供了内嵌功能，这样一来，我们就能将表单中的一些字段组合起来，当作一个自快进行处理。
<@H_502_9@form novalidate name=@H_502_9@"myForm"@H_502_9@>@H_502_9@
<@H_502_9@input type@H_502_9@=@H_502_9@"text"@H_502_9@
class=@H_502_9@"username"@H_502_9@
name=@H_502_9@"uname"@H_502_9@
ng-model@H_502_9@=@H_502_9@"ctrl.user.username"@H_502_9@
required=@H_502_9@""@H_502_9@
placeholder=@H_502_9@"Username"@H_502_9@
ng-minlength@H_502_9@=@H_502_9@"4"@H_502_9@ /@H_502_9@>@H_502_9@
<@H_502_9@input type@H_502_9@=@H_502_9@"password"@H_502_9@
class=@H_502_9@"password"@H_502_9@
name=@H_502_9@"pwd"@H_502_9@
ng-model@H_502_9@=@H_502_9@"ctrl.user.password"@H_502_9@
placeholder=@H_502_9@"Password"@H_502_9@
required=@H_502_9@""@H_502_9@ /@H_502_9@>@H_502_9@
<@H_502_9@ng-form@H_502_9@ name=@H_502_9@"profile"@H_502_9@>@H_502_9@
<@H_502_9@input type@H_502_9@=@H_502_9@"text"@H_502_9@
name=@H_502_9@"firstName"@H_502_9@
ng-model@H_502_9@=@H_502_9@"ctrl.user.profile.firstName"@H_502_9@
placeholder=@H_502_9@"First Name"@H_502_9@
required>@H_502_9@
<@H_502_9@input type@H_502_9@=@H_502_9@"text"@H_502_9@
name=@H_502_9@"middleName"@H_502_9@
placeholder=@H_502_9@"Middle Name"@H_502_9@
ng-model@H_502_9@=@H_502_9@"ctrl.user.profile.middleName"@H_502_9@>@H_502_9@
<@H_502_9@input type@H_502_9@=@H_502_9@"text"@H_502_9@
name=@H_502_9@"lastName"@H_502_9@
placeholder=@H_502_9@"Last Name"@H_502_9@
ng-model@H_502_9@=@H_502_9@"ctrl.user.profile.lastName"@H_502_9@ required>@H_502_9@
<@H_502_9@input type@H_502_9@=@H_502_9@"date"@H_502_9@
name=@H_502_9@"dob"@H_502_9@
placeholder=@H_502_9@"Date Of Birth"@H_502_9@
ng-model@H_502_9@=@H_502_9@"ctrl.user.profile.dob"@H_502_9@ required>@H_502_9@
<@H_502_9@/ng-form@H_502_9@>@H_502_9@
<@H_502_9@span ng-show@H_502_9@=@H_502_9@"myForm.profile.$invalid"@H_502_9@>@H_502_9@
Please fill out the profile information
<@H_502_9@/span>@H_502_9@
<@H_502_9@input type@H_502_9@=@H_502_9@"submit"@H_502_9@
value=@H_502_9@"Submit"@H_502_9@
ng-disabled@H_502_9@=@H_502_9@"myForm.$invalid"@H_502_9@>@H_502_9@
<@H_502_9@/form>@H_502_9@
- 1 通过ng-form指令创建出子菜单，用户可以给该表单分配名称，用于获取它本身和它的状态
- 2 子表单的状态的既能直接通过 （子表单名.@H_502_9@
v@H_502_9@a@H_502_9@l@H_502_9@i@H_502_9@d @H_502_9@invalid） - 3 表单中的每一个元素都可以通过普通方式（表单名.firstName.$error.required）访问
- 4 子表单和内嵌表单会影响外部表单（myForm.$invalid是true，因为使用了required）
8 其他表单控件
<!--多行文本输入框(Textarea)-->@H_502_9@
<textarea@H_502_9@ ng-model@H_502_9@="ctrl.user.address"@H_502_9@ required@H_502_9@>@H_502_9@</textarea@H_502_9@>@H_502_9@
<!--复选框(CheckBox)-->@H_502_9@
<input@H_502_9@ type@H_502_9@="checkBox"@H_502_9@ ng-model@H_502_9@="ctrl.user.agree"@H_502_9@ ng-true-value@H_502_9@="YES"@H_502_9@ ng-false-value@H_502_9@="NO"@H_502_9@>@H_502_9@
<!--单选框(RadioButton)-->@H_502_9@
<div@H_502_9@ ng-init@H_502_9@="user = {gender:'female'}"@H_502_9@>@H_502_9@
<input@H_502_9@ type@H_502_9@="radio"@H_502_9@ name@H_502_9@="gender"@H_502_9@ ng-model@H_502_9@="user.gender"@H_502_9@ value@H_502_9@="male"@H_502_9@>@H_502_9@
<input@H_502_9@ type@H_502_9@="radio"@H_502_9@ name@H_502_9@="gender"@H_502_9@ ng-model@H_502_9@="user.gender"@H_502_9@ value@H_502_9@="female"@H_502_9@>@H_502_9@
</div@H_502_9@>@H_502_9@
<!--下拉框(Combo Boxes/Drop-Downs)-->@H_502_9@
<div@H_502_9@ ng-init@H_502_9@="location = 'India'"@H_502_9@>@H_502_9@
<select@H_502_9@ ng-model@H_502_9@="location"@H_502_9@>@H_502_9@
<option@H_502_9@ value@H_502_9@="USA"@H_502_9@>@H_502_9@USA</option@H_502_9@>@H_502_9@
<option@H_502_9@ value@H_502_9@="India"@H_502_9@>@H_502_9@India</option@H_502_9@>@H_502_9@
<option@H_502_9@ value@H_502_9@="Other"@H_502_9@>@H_502_9@None of the above</option@H_502_9@>@H_502_9@
</select@H_502_9@>@H_502_9@
</div@H_502_9@>@H_502_9@
