angular 表单元素,例如checkbox,radio,select等用法
2016-10-09 09:46
351 查看
Angular Form Input Type
Form 表单中有很多元素,最普遍的Input,CheckBox,Radio,Select等等。Angular的Form有什么特殊之处呢?
Input
Input的属性有:name 名字
type 类型(HTML5里有的类型: number,url,email)
ng-model 绑定的数据
required/ng-required 是否必填
ng-minlength 最小长度
ng-maxlength 最大长度
ng-pattern 匹配模式
ng-change 值变化时的回调
例子(输入长度5-15的起始为abc的内容):
1 | <input type="text" name="a" required ng-model="a" required ng-minlength=5 ng-maxlength=15 ng-pattern="/abc/"/> |
Checkbox
Checkbox只有两种值,选中和不选中。使用方法:
1234567 | # HTML5: <input type="checkbox" name="checkbox" ng-model="checkbox_value" ng-true-value="AA" ng-false-value="BB"/> <span>{{ checkbox_value }}</span># JS: $scope.checkbox_value = 'AA'; #controller中的初始化值会关系到控件状态(双向绑定) |
Radio
与checkbox的区别,一个radio只有一个值123 | <input type="radio" name="radio_test" ng-model="radio_test" value="AA"/>AA<input type="radio" name="radio_test" ng-model="radio_test" value="BB"/>BB<br>radio选中的值为:<span>{{ radio_test }}</span> |
Textarea
与Input类似,但是可以拉伸
Select
使用ng-options遍历数组x for x in 数组名(普通数组)
12345 | <div ng-init="o=[0,1,2,3]; a=o[1];"> <select ng-model="select_test" ng-options="x for x in o" ng-change="show()"> <option value="">可以加这个空值</option> </select>select选中的值为: {{ select_test }}</div> |
1234 | <div ng-init="o2=[{name: 'AA'}, {name: 'BB'}]; a=o2[1];"> <select ng-model="select_test2" ng-options="x.name for x in o2"> </select>select选中的值为: {{ select_test2 }}</div> |
1234 | <div ng-init="o3=[{name: 'AA', v: '00'}, {name: 'BB', v: '11'}]; a=o3[1].v;"> <select ng-model="select_test3" ng-options="x.v as x.name for x in o3"> </select>select选中的值为: {{ select_test3 }}</div> |
1234 | <div ng-init="o4=[{name: 'AA', g: '00'},{name: 'BB', g: '11'},{name: 'CC', g: '00'}]; select_test4=o4[1];"> <select ng-model="select_test4" ng-options="x.name group by x.g for x in o4"> </select>select选中的值为: name值是{{ select_test4.name }};value是{{ select_test4.g }}</div> |
1234 | <div ng-init="o5=[{name: 'AA', g: '00', v: '='}, {name: 'BB', g: '11', v: '+'},{name: 'CC', g: '00', v: '!'}]; select_test5=o5[1].v;"> <select ng-model="select_test5" ng-options="x.v as x.name group by x.g for x in o5"> </select>select选中的值为: {{ select_test5 }}</div> |
123456789 | <div ng-init="o6={a: {name: 'AA', v: '00', g: '=='},b: {name: 'BB', v: '11', g: '=='}}; select_test6=o6.a.v;"> 参数是对象<br> 显示对象的值里的v的值<br> <select ng-model="select_test6" ng-options="v.v as v.name group by v.g for (k, v) in o6"> </select>select选中的值为: {{ select_test6 }}、 显示对象的名字<br> <select ng-model="select_test7" ng-options="k for (k, v) in o6"> </select>select选中的值为: {{ select_test7 }}</div> |
转自我的Github博客
相关文章推荐
- Jquery操作各种表单元素 select checkbox radio
- jquery操作select、radio、checkbox表单元素
- jQuery获取,遍历和操作表单元素Select,checkbox,radio
- 利用jQuery来简化radio,checkbox,select,radio表单元素的操作
- jQuery获取,遍历和操作表单元素Select,checkbox,radio
- jquery 筛选不到 checkbox, radio 表单元素
- JQUERY获取form表单text,areatext,radio,checkbox,select值
- Jquery 获取表单text,areatext,radio,checkbox,select值的代码(本内容来自唯才教育网http://www.hn1c.com 原文地址:http://www.hn1
- Jquery操作radio,checkbox,select表单操作实现代码
- JQUERY获取form表单text,areatext,radio,checkbox,select值
- jquery获取指定表格的指定列的值 以及 操作radio,checkbox,select表单操作实现代码
- web页面中表单控件(如checkbox,select,radio等)的赋值回写的方法介绍
- 表单元素与提示文字无法对齐的问题(input,radio,checkbox文字对齐)
- Jquery操作表单Select元素的用法
- Jquery操作表单Select元素的用法
- Jquery操作radio,checkbox,select表单操作实现代码
- JQUERY 获取form表单text,areatext,radio,checkbox,select值 以及 JavaScrpt获取文本框值
- jquery操作表单,包括常用的radio,checkbox,select
- Jquery 获取表单text,areatext,radio,checkbox,select值的代码
- Jquery操作表单Select元素的用法