AngularJS动态生成select下拉框的方法实例
一、select相关知识
其中,value是存储到数据库的值,在此处为0,1,2这些数值,label为显示在页面的值,在此处为Html、Java这些字符。
二、ng-options
1.数组作为数据源
- labelforvalueinarray
- selectaslabelforvalueinarray
- labelgroupbygroupforvalueinarray
代码1(数组中为字符串)
最终得到的结果为:
baidu apple
需要注意的是,在最后生成的html代码中option的value值为String:baidu,会在数组中原有的字符串之前加上其类型的标识,这个通过百度了解到是因为angularjs版本问题造成,具体未测试。
代码2(数组中为一个对象)
最终得到的html代码为:
baidu apple
通过生成的html代码,我们可以看到这样写会使得最终的option的value值显示为数据类型,而实际想要得到的结果是显示我们选中的值,因此需要写为:
ng-options="c.idasc.nameforcincoms"
其中,c.id对应value,c.name对应label。生成html代码为:
百度 谷歌 苹果
代码3(根据对象属性分类)