AngularJs(Part 9)
来源:互联网 发布:阳泉百度云计算 编辑:程序博客网 时间:2024/06/05 23:01
AngularJS 表单
AngularJS使用了MVX的结构,我们可以是传统的表单更加强大。比如过去我们得自己写一大堆验证,比过过去我们得自己转换用户的输入,
现在这些工作全部可以交给AngularJS. 我们唯一要关心的就是model中的值。
在AngularJS中 ,form和input其实也是directive。(是不是很奇怪!) 这两个家伙就是传统form的加强版。
使用input标签
ng-model input专用directive,双向绑定,配合其他功能提供输入验证和转换功能。
required 表示不能为空;ng-minlength 表示最小长度; ng-maxlength 表示最大长度;ng-pattern="/^[a-zA-Z]*$/" 表示必须符合的正则.
现有如下代码:
<input ng-model="user.name" required ng-minlength="3" ng-maxlength="10" ng-pattern="/^[a-zA-Z]*$/" />
如果输入"ab",那么user.name中其实是空的,因为ng-minlength验证没通过。同理如果ng-maxlength、ng-pattern没有通过,user.name
中都是空值。所以我们可以直接拿来用user.name而不必担心中会有invalid的值。
使用checkbox
checkbox有true和false两个值。 当然,如果加了ng-true-value和ng-false-value两个directive,可以改变默认的值。
如下,如果选中该checkbox,user.admin的值会是"admin",没选中会是"normal"
<input type="checkbox" ng-model="user.admin" ng-true-value="admin" ng-false-value="normal"/>
使用radio
没什么好说的,如下代码:
<input type="radio" ng-model="user.sex" value="male"/>
<input type="radio" ng-model="user.sex" value="female"/>
使用select
简单用法:
<select ng-model="user.sex">
<option style="display:none" value=""></option> //如果不加这一行,那么会出现三个选项,第一项为空
<option value="m">Male</option>
<option value="f">Female</option>
</select>
复杂用法:
首先 $scope.users=[{name:'Mike',email:'mike@qq.com'},{name:'jack',emial:'jack@163.com'}]
然后:<select ng-options="u.email as u.name for u in users">
<option style="display:none" value=""></option>
</select>
意思是在select中显示的是每个user的name,但是选中后的值却是每个user的email
深入了解ngModel
每一个ngModel都会新建一个ngModelController的对象。该对象可以访问该input上的其他directive。
ngModel是双向绑定的,相应的ngModelController中有两个数组:$formatters 和$parsers。$formatters 用来把model中的值
转换为显示在view上的值;$parsers则相反。
每一个form都对应一个ngFormController对象。ngModelController作为ngFormController对象的属性。
假设有如下代码:
<form name='form1'>
<input name='input1' type='email' required/>
</form>
那么 $scope.form1就是ngFormController对象;$scope.form1.input1就是ngModelController的对象。
那么通过$scope.form1.$valid就可以知道这个form有没有通过验证;$scope.form1.input1.$valid就可以知道这个input有没有通过验证。
但是这个input上其实有两个验证:一个是type='email';一个是 required。怎么知道那个验证有没有通过? 可以使用
$scope.form1.input1.$error['required'] 和$scope.form1.input1.$error['email']这两个布尔值知道。
AngularJS使用了MVX的结构,我们可以是传统的表单更加强大。比如过去我们得自己写一大堆验证,比过过去我们得自己转换用户的输入,
现在这些工作全部可以交给AngularJS. 我们唯一要关心的就是model中的值。
在AngularJS中 ,form和input其实也是directive。(是不是很奇怪!) 这两个家伙就是传统form的加强版。
使用input标签
ng-model input专用directive,双向绑定,配合其他功能提供输入验证和转换功能。
required 表示不能为空;ng-minlength 表示最小长度; ng-maxlength 表示最大长度;ng-pattern="/^[a-zA-Z]*$/" 表示必须符合的正则.
现有如下代码:
<input ng-model="user.name" required ng-minlength="3" ng-maxlength="10" ng-pattern="/^[a-zA-Z]*$/" />
如果输入"ab",那么user.name中其实是空的,因为ng-minlength验证没通过。同理如果ng-maxlength、ng-pattern没有通过,user.name
中都是空值。所以我们可以直接拿来用user.name而不必担心中会有invalid的值。
使用checkbox
checkbox有true和false两个值。 当然,如果加了ng-true-value和ng-false-value两个directive,可以改变默认的值。
如下,如果选中该checkbox,user.admin的值会是"admin",没选中会是"normal"
<input type="checkbox" ng-model="user.admin" ng-true-value="admin" ng-false-value="normal"/>
使用radio
没什么好说的,如下代码:
<input type="radio" ng-model="user.sex" value="male"/>
<input type="radio" ng-model="user.sex" value="female"/>
使用select
简单用法:
<select ng-model="user.sex">
<option style="display:none" value=""></option> //如果不加这一行,那么会出现三个选项,第一项为空
<option value="m">Male</option>
<option value="f">Female</option>
</select>
复杂用法:
首先 $scope.users=[{name:'Mike',email:'mike@qq.com'},{name:'jack',emial:'jack@163.com'}]
然后:<select ng-options="u.email as u.name for u in users">
<option style="display:none" value=""></option>
</select>
意思是在select中显示的是每个user的name,但是选中后的值却是每个user的email
深入了解ngModel
每一个ngModel都会新建一个ngModelController的对象。该对象可以访问该input上的其他directive。
ngModel是双向绑定的,相应的ngModelController中有两个数组:$formatters 和$parsers。$formatters 用来把model中的值
转换为显示在view上的值;$parsers则相反。
每一个form都对应一个ngFormController对象。ngModelController作为ngFormController对象的属性。
假设有如下代码:
<form name='form1'>
<input name='input1' type='email' required/>
</form>
那么 $scope.form1就是ngFormController对象;$scope.form1.input1就是ngModelController的对象。
那么通过$scope.form1.$valid就可以知道这个form有没有通过验证;$scope.form1.input1.$valid就可以知道这个input有没有通过验证。
但是这个input上其实有两个验证:一个是type='email';一个是 required。怎么知道那个验证有没有通过? 可以使用
$scope.form1.input1.$error['required'] 和$scope.form1.input1.$error['email']这两个布尔值知道。
0 0
- AngularJs(Part 9)
- AngularJs(Part 1)
- AngularJs(Part 2)
- AngularJs(Part 3)
- AngularJs(Part 4)
- AngularJs(Part 5)
- AngularJs(Part 6)
- AngularJs(Part 7)
- AngularJs(Part 8)
- AngularJS(Part 10)
- 创建自定义 AngularJS 指令:Part 5 link
- 创建自定义 AngularJS 指令:Part I 指令基础知识
- 创建自定义 AngularJS 指令:Part 2 孤立作用域
- 创建自定义 AngularJS 指令:Part 4 transclude和restrict介绍
- 创建自定义 AngularJS 指令:Part 6 使用controllers
- “JavaScript Promises和AngularJS $q Service”Part 1 (基础篇)
- “JavaScript Promises和AngularJS $q Service”Part 2 (教程篇)
- “JavaScript Promises和AngularJS $q Service”Part 1 (基础篇)
- Hdu3480 Division dp+四边形不等式优化
- c# 操作XML文件时名称空间两个问题,附xml操作类
- STL学习之零散记录(不断更新中)
- 项目重构之数据源配置与优化:log4j 配置数据库连接池Druid,并实现日志存储到数据库
- Guava学习笔记之Joiner ,Strings,Splitter 工具实例
- AngularJs(Part 9)
- HDU1754 I Hate It (Splay)
- php基本的验证码
- 滤波器基础知识
- Foundation框架中的NSString
- git服务器的简单搭建
- 【面试】2015届校招阿里巴巴研发工程师杭州站offer经历与详细过程
- C#生成验证码
- LibPaBOD(a LIBrary for PArt-Based Object Detection in C++)我在运行中遇到的问题和解决方案