介绍
本篇文章为大家展示了如何在表单中使用ng-options和ng-checked方法,内容简明扼要并且容易理解,绝对能使你眼前一亮,通过这篇文章的详细介绍希望你能有所收获。
<强> ng-options
在选择表单控件中,总结一下目前的几种写法。
<>强普通写法
& lt; select>
& lt;才能test1 option 价值=https://www.yisu.com/zixun/" test1 ">
test1 test1 <选项值=" ">
test1 test1 <选项值=" ">
test1 test1 <选项值=" ">
优点:简单
缺点:
<李> 代码很不简洁,如果选项较多就会很乱
<李> 不方便渲染,如果选择在变需要使用js动态加载
<李> 不方便存储对象
<强>使用ng-repeat
ng-repeat是angularJS中非常强大的一个指令,在渲染列表上极大的方便了前端开发者,那么由于有多个重复的选项,当然可以使用ng-repeat,用法如下:
& lt; select>
& lt;才能option ng-repeat=皁ption 拷贝options",价值=https://www.yisu.com/zixun/"{{选项}}"> {{option.name}}
<>脚本
美元的范围。选项=[{id: 1、名称:test1的},{id: 2,名字:“test2”}, {id: 3,名字:‘test3});
优点:
<李> 代码简介
<李> 可存储对象,取值方便
缺点:
<李> 没有默认显示!,在有些界面需求中,选择可能是需要占位符一样的显示提示效果的,那么使用这个方式显示效果默认是空白
<李> 无法通过ng-model来获取当前选择的值
<强>使用ng-options
这里使用一个年级,班级的选项来作为例子:即选择年级之后再显示对应的可选班级。
& lt; select ng-model=癿odal.grade", ng-change=癿odalChangeGrade ()“, ng-options=癵rade.gradeText for grade 拷贝modal.grades"比;
& lt;才能option 价值=https://www.yisu.com/zixun/薄敖?请选择>
<>脚本
scope.modal美元。成绩=[
{id: 1、gradeText:“初一”,类:[]},
{id: 2, gradeText:“初二”,类:[]},
{id: 3, gradeText:“高”一},类:[]];
美元的范围。modalChangeGrade=function () {//班级的HTML片段就不在这里写了
scope.modal美元。类=$ scope.modal.grade.classes;
}
注:
"请选择“的选项需要有价值,不然会报错
如果要设置默认选择值,比如一开始就选择“高一“,则需要设置模态在数组里的对象。
scope.modal.grade 美元;=,scope.modal.grades美元[2];//高一在数组的位置角标为2 优点:
<李> 代码简洁,易于维护
<李> 有默认显示
<李> 可以使用ng-modal准确获取当前选择的对象
<强> ng-checked
复选框和广播是我们经常使用到的表单组件,那么如何使用angularJs简洁方便的获取当前已选择对象呢?
这里只说angularJs的用法:
下面依然以年级和班级为例:
& lt; div ng-repeat=癱lass 拷贝grade.classes", ng-click=癱lass.is_checked=! class.is_checked"比;
& lt;才能input 类型=癱heckbox",值=https://www.yisu.com/zixun/薄皀g-checked=" class.is_checked ">
{{class.id +“班”}}
最后需要查看有哪些复选框被选中时,只需要遍历scope.grade美元。类数组查看有哪些对象的is_checked属性为真实即可。
电台的用法同理。
上述内容就是如何在表单中使用ng-options和ng-checked方法,你们学到知识或技能了吗?如果还想学到更多技能或者丰富自己的知识储备,欢迎关注行业资讯频道。
