一、select相关知识
其中,value 是存储到数据库的值,在此处为0,1,2这些数值,label 为显示在页面的值,在此处为Html、Java这些字符。
二、ng-options
1.数组作为数据源
- label for value in array
- select as label for value in array
- label group by group for value in array
代码1(数组中为字符串)
最终得到的结果为:
需要注意的是,在最后生成的html代码中option的value 值为String:baidu ,会在数组中原有的字符串之前加上其类型的标识,这个通过百度了解到是因为angularjs版本问题造成,具体未测试。
代码2(数组中为一个对象)
最终得到的html代码为:
通过生成的html代码,我们可以看到这样写会使得最终的option 的value 值显示为数据类型,而实际想要得到的结果是显示我们选中的值,因此需要写为:
ng-options="c.id as c.name for c in coms"
其中,c.id 对应value ,c.name 对应label 。生成html代码为:
代码3(根据对象属性分类)
得到的html代码为:
注意事项(默认选中问题)
通过以上最终得到的HTML代码可以发现,每次生成的代码都会默认选中一个空白的选项,如果需要手动指定一个默认选中值应该怎么设置?
我们有两种方式(此处代码不完整,验证时请将html部分补充完整):
2.对象作为数据源
- label for (key, value) in object
代码展示
{{name4}}
3.全部语法
for array data sources:
- label for value in array
- select as label for value in array
- label group by group for value in array
- label disable when disable for value in array
- label group by group for value in array track by trackexpr
- label disable when disable for value in array track by trackexpr
- label for value in array | orderBy:orderexpr track by trackexpr(for including a filter with track by)
for object data sources:
- label for (key , value) in object
- select as label for (key ,value) in object
- label group by group for (key,value) in object
- label disable when disable for (key, value) in object
- select as label group by group for(key, value) in object
- select as label disable when disable for (key, value) in object
三、ng-repeat
代码示例:
四、总结
使用ng-repeat动态生成select比ng-option略微简单,但是ng-repeat有一定的局限性,选择的值只能是一个字符串,而使用ng-option选择的值可以是一个对象。
好了,以上就是这篇文章的全部内容了,希望本文的内容对大家的学习或者工作具有一定的参考学习价值,谢谢大家对考高分网的支持。



