angularjs学习笔记—指令input - SegmentFault

合集下载

相关主题

tab切换

1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。

input[datetime-local]
日期时间选择器用法基本同input[date]，就是比date多了个时间选择。
input[month]
月份选择器，只能选择年和月。 required 必填 ngRequired 必填 min 最小月份 max 最大月份 ngChange model更新触发如果给month初始化值，model一定得是Date类型，否则会报错。
http://segmentfault.com/a/1190000002632671
1/11
2015/9/11
angularjs学习笔记—指令input - SegmentFault
当input有校验属性时，如果输入的值不符合校验条件，model会被更新成undefined 。如果想正常更新 model可以通过ngModelOptions设置。版本：v1.3.9-local
http://segmentfault.com/a/1190000002632671
4/11
2015/9/11
angularjs学习笔记—指令input - SegmentFault
# h t m l < d i vn g c o n t r o l l e r = " L e a r n C t r l " > { { m o n t h } } < / d i v > # s c r i p t a n g u l a r . m o d u l e ( ' l e a r n M o d u l e ' ,[ ] ) . c o n t r o l l e r ( ' L e a r n C t r l ' ,f u n c t i o n( $ s c o p e ){ $ s c o p e . m o n t h=n e wD a t e ( ' 2 0 1 5 0 5 ' ) ; $ s c o p e . c h a n g e=f u n c t i o n( ){ a l e r t ( ' c h a n g e ' ) ; } } ) ;
input[radio]
单选按钮 value 选择中时的值 ngValue 选择中时的值（表达式） ngchange model更新触发没有required属性，没办法做必填校验，所以最好初始化的时候默认选中一个。
http://segmentfault.com/a/1190000002632671 2/11
2015/9/11
angularjs学习笔记—指令input - SegmentFault
# h t m l < d i vn g c o n t r o l l e r = " L e a r n C t r l " > { { r a d i o } } < / d i v > # s c r i p t a n g u l a r . m o d u l e ( ' l e a r n M o d u l e ' ,[ ] ) . c o n t r o l l e r ( ' L e a r n C t r l ' ,f u n c t i o n( $ s c o p e ){ $ s c o p e . r a d i o=' v a l u e 2 ' ; $ s c o p e . c h a n g e=f u n c t i o n( ){ a l e r t ( ' c h a n g e ' ) ; } } ) ;
input[checkbox]
当未设置ngTrueValue和ngFalseValue时，默认值是true和false。
# h t m l { { c h e c k } } 
3/11
2015/9/11
angularjs学习笔记—指令input - SegmentFault
# h t m l < d i vn g c o n t r o l l e r = " L e a r n C t r l " > { { d a t e } } < / d i v > # s c r i p t a n g u l a r . m o d u l e ( ' l e a r n M o d u l e ' ,[ ] ) . c o n t r o l l e r ( ' L e a r n C t r l ' ,f u n c t i o n( $ s c o p e ){ $ s c o p e . d a t e=n e wD a t e ( ' 2 0 1 5 1 2 1 2 ' ) ; $ s c o p e . c h a n g e=f u n c t i o n( ){ a l e r t ( ' c h a n g e ' ) ; } } ) ;
设置了这两个值了，就可以指定选中和未选中的model值。checkbox同样也有ng-chage指令。 ngTrueValue和ngFalseValue的参数是表达式哦。
# h t m l < d i vn g c o n t r o l l e r = " L e a r n C t r l " > { { c h e c k } } < / d i v > # s c r i p t a n g u l a r . m o d u l e ( ' l e a r n M o d u l e ' ,[ ] ) . c o n t r o l l e r ( ' L e a r n C t r l ' ,f u n c t i o n( $ s c o p e ){ $ s c o p e . c h e c k=' Y E S ' ; $ s c o p e . c h a n g e=f u n c t i o n( ){ a l e r t ( ' c h a n g e ' ) ; } } ) ;
5/11
2015/9/11
angularjs学习笔记—指令input - SegmentFault
# h t m l < d i vn g c o n t r o l l e r = " L e a r n C t r l " > { { t i m e } } < / d i v > # s c r i p t a n g u l a r . m o d u l e ( ' l e a r n M o d u l e ' ,[ ] ) . c o n t r o l l e r ( ' L e a r n C t r l ' ,f u n c t i o n( $ s c o p e ){ $ s c o p e . t i m e=n e wD a t e ( ' 2 0 1 5 1 2 1 22 0 : 0 0 : 0 0 ' ) ; $ s c o p e . c h a n g e=f u n c t i o n( ){ a l e r t ( ' c h a n g e ' ) ; } } ) ;
推荐收藏
3月30Байду номын сангаас 发布
1 推荐 8 收藏，3.4k 浏览
input[text]
input一般和ngModel结合使用来实现双向绑定，同时angular提供了很多表单校验的指令 required 必填 ngRequired 必填（ngRequired 可以控制是否是必填校验） ngMinlength 最小长度 ngMaxlength 最大长度 pattern 正则匹配 ngPattern 正则匹配 ngChange 内容改变时触发 ngTrim 是否trim数据，默认true
input[date]
H5新增的日期选择器。 required 必填 ngRequired 必填 min 最小日期 max 最大日期 ngChange model更新触发如果给date初始化值，model一定得是Date类型，否则会报错。
http://segmentfault.com/a/1190000002632671
2015/9/11
angularjs学习笔记—指令input - SegmentFault
文章 (/blogs)
学习笔记 (/blog/yuyang040160120)
文章详情
angularjs学习笔记—指令input (/a/1190000002632671)
小俞 (/u/yuyang040160120) 2.8k
input[time]
时间选择 required 必填 ngRequired 必填 min 最小时间 max 最大时间 ngChange model更新时触发如果给time初始化值，model一定得是Date类型，否则会报错。
http://segmentfault.com/a/1190000002632671
# h t m l < d i vn g c o n t r o l l e r = " L e a r n C t r l " > < i n p u tt y p e = " t e x t " n g m o d e l = " u s e r n a m e " r e q u i r e d n g r e q u i r e d = " t r u e " n g m i n l e n g t h = " 6 " n g m a x l e n g t h = " 1 5 " p a t t e r n = " [ 0 9 ] { 6 , 1 5 } " n g p a t t e r n = " / ^ [ 0 9 ] { 6 , 1 5 } $ / " n g c h a n g e = " c h a n g e ( ) " n g t r i m = " f a l s e " / > < / d i v > # s c r i p t a n g u l a r . m o d u l e ( ' l e a r n M o d u l e ' ,[ ] ) . c o n t r o l l e r ( ' L e a r n C t r l ' ,f u n c t i o n( $ s c o p e ){ $ s c o p e . c h a n g e=f u n c t i o n( ){ a l e r t ( ' c h a n g e ' ) ; } } ) ;