使用AngularJS怎么动态生成select下拉框-古蔺大橙子建站

这里有您想知道的互联网营销解决方案

使用AngularJS怎么动态生成select下拉框

这篇文章将为大家详细讲解有关使用AngularJS怎么动态生成select下拉框，文章内容质量较高，因此小编分享给大家做个参考，希望大家阅读完这篇文章后对相关知识有一定的了解。

岚县网站制作公司哪家好，找创新互联建站！从网页设计、网站建设、微信开发、APP开发、自适应网站建设等网站项目制作，到程序开发，运营维护。创新互联建站从2013年创立到现在10年的时间，我们拥有了丰富的建站经验和运维经验，来保证我们的工作的顺利进行。专注于网站建设就选创新互联建站。

一、select相关知识

其中，value 是存储到数据库的值，在此处为0，1，2这些数值，label 为显示在页面的值，在此处为Html、Java这些字符。

二、ng-options

1.数组作为数据源

代码1(数组中为字符串)

最终得到的结果为：


 
 baidu
 Google
 apple

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

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

最终得到的html代码为：



 
 baidu
 Google
 apple

通过生成的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.对象作为数据源

代码展示










	{{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:

三、ng-repeat

代码示例：

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

关于使用AngularJS怎么动态生成select下拉框就分享到这里了，希望以上内容可以对大家有一定的帮助，可以学到更多知识。如果觉得文章不错，可以把它分享出去让更多的人看到。

分享名称：使用AngularJS怎么动态生成select下拉框
文章地址：http://scgulin.cn/article/pedhpc.html