AngularJS动态生成select下拉框的方法实例

一、select相关知识

  HTMLJavaPython

其中，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(数组中为字符串)

   <span style="color:transparent">来源gaodai#ma#com搞*代#码网</span> <div> <!-- 这里的label和value需一致，否则会报错 表达式语法：label for value in array --></div>

最终得到的结果为：

  baiduGoogleapple

需要注意的是，在最后生成的html代码中option的value 值为String:baidu ，会在数组中原有的字符串之前加上其类型的标识，这个通过百度了解到是因为angularjs版本问题造成，具体未测试。

代码2（数组中为一个对象）

    <div> <!-- 表达式语法：label for value in array --></div>

最终得到的html代码为：

 <!-- 注意：此处ng-model绑定的name变量并非选中项的name属性，而是选中项的全部属性 如选中了索引为0项，则name={"id":"baidu","name":"百度"} 这边ng-model绑定变量为值为select的value值 --> baiduGoogleapple

通过生成的html代码，我们可以看到这样写会使得最终的option 的value 值显示为数据类型，而实际想要得到的结果是显示我们选中的值，因此需要写为：

 <!-- 表达式语法:select as label for value in array c.id作为select的value，c.name作为select的label --> ng-options="c.id as c.name for c in coms"

其中，c.id 对应value ，c.name 对应label 。生成html代码为：

  百度谷歌苹果

代码3（根据对象属性分类）

    <div> <!-- 表达式语法：label group by group for value in array --></div>

得到的html代码为：

   百度谷歌 苹果 淘宝

注意事项(默认选中问题)

通过以上最终得到的HTML代码可以发现，每次生成的代码都会默认选中一个空白的选项，如果需要手动指定一个默认选中值应该怎么设置？

我们有两种方式(此处代码不完整，验证时请将html部分补充完整)：

 <!-- 以代码2中(label for value in array)和(select as label for value in array) 为例--><!-- 方式一:ng-init属性 两种语法形式在使用ng-init时有一定区别，其中第二中写为了name=coms[0].id是因为在ng-options中通过		select as 为当前的select指定了coms[0].id作为value的值；在写法一种未指定value值，则默认为coms中	 的一个对象。 --><!-- 方式二： 在js代码中为ng-model绑定的变量赋值 -->

2.对象作为数据源

• label for (key, value) in object

代码展示

    <div> {{name4}} <!-- 表达式语法：select as label for (key, value) in object --></div>

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

代码示例：

    <div>  ====请选择===={{com.name}}</div>

四、总结
使用ng-repeat动态生成select比ng-option略微简单，但是ng-repeat有一定的局限性，选择的值只能是一个字符串，而使用ng-option选择的值可以是一个对象。

好了，以上就是这篇文章的全部内容了，希望本文的内容对大家的学习或者工作具有一定的参考学习价值，谢谢大家对gaodaima搞代码网的支持。