好资源导航 » 文章资讯 » AngularJS动态生成select下拉框的方法实例

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

2023-08-08 17:52:10 67

一、select相关知识

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

二、ng-options

1.数组作为数据源

labelforvalueinarray
selectaslabelforvalueinarray
labelgroupbygroupforvalueinarray

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

最终得到的结果为：



baidu
Google
apple

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

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

最终得到的html代码为：




baidu
Google
apple

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


ng-options="c.idasc.nameforcincoms"

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



百度
谷歌
苹果

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

得到的html代码为：



百度
谷歌

苹果
		

淘宝

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

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

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

2.对象作为数据源

labelfor(key,value)inobject

代码展示










	{{name4}}

3.全部语法

forarraydatasources:

labelforvalueinarray
selectaslabelforvalueinarray
labelgroupbygroupforvalueinarray
labeldisablewhendisableforvalueinarray
labelgroupbygroupforvalueinarraytrackbytrackexpr
labeldisablewhendisableforvalueinarraytrackbytrackexpr
labelforvalueinarray|orderBy:orderexprtrackbytrackexpr(forincludingafilterwithtrackby)

forobjectdatasources:

labelfor(key,value)inobject
selectaslabelfor(key,value)inobject
labelgroupbygroupfor(key,value)inobject
labeldisablewhendisablefor(key,value)inobject
selectaslabelgroupbygroupfor(key,value)inobject
selectaslabeldisablewhendisablefor(key,value)inobject

三、ng-repeat

代码示例：

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

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

声明：本文内容来源于网络，版权归原作者所有，内容由互联网用户自发贡献自行上传，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任。如果您发现有涉嫌版权的内容，欢迎发送邮件至：czq8825#qq.com（发邮件时，请将#更换为@）进行举报，并提供相关证据，一经查实，本站将立刻删除涉嫌侵权内容。

返回顶部
514930285
czq8825@qq.com

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

热门推荐

随机推荐