使用AngularJS怎么动态生成select下拉框-创新互联-乐山大橙子建站

新闻中心

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

使用AngularJS怎么动态生成select下拉框-创新互联

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

十多年专注成都网站制作，成都企业网站建设，个人网站制作服务，为大家分享网站制作知识、方案，网站设计流程、步骤,成功服务上千家企业。为您提供网站建设,网站制作,网页设计及定制高端网站建设服务,专注于成都企业网站建设,高端网页制作,对混凝土搅拌罐车等多个方面，拥有丰富的网站维护经验。

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

最终得到的结果为：


 
 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.对象作为数据源

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选择的值可以是一个对象。

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

另外有需要云服务器可以了解下创新互联scvps.cn，海内外云服务器15元起步，三天无理由+7*72小时售后在线，公司持有idc许可证，提供“云服务器、裸金属服务器、高防服务器、香港服务器、美国服务器、虚拟主机、免备案服务器”等云主机租用服务以及企业上云的综合解决方案，具有“安全稳定、简单易用、服务可用性高、性价比高”等特点与优势，专为企业上云打造定制，能够满足用户丰富、多元化的应用场景需求。

分享名称：使用AngularJS怎么动态生成select下拉框-创新互联
URL标题：http://lswzjz.com/article/ejeod.html

新闻中心

其他资讯