栏目分类:
子分类:
返回
名师互学网用户登录
快速导航关闭
当前搜索
当前分类
子分类
实用工具
热门搜索
名师互学网 > IT > 软件开发 > Web开发 > JavaScript

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

JavaScript 更新时间: 发布时间: IT归档 最新发布 模块sitemap 名妆网 法律咨询 聚返吧 英语巴士网 伯小乐 网商动力

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










 
	




最终得到的结果为:

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

代码2(数组中为一个对象)









 
	



最终得到的html代码为:


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

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

转载请注明:文章转载自 www.mshxw.com
本文地址:https://www.mshxw.com/it/72381.html
我们一直用心在做
关于我们 文章归档 网站地图 联系我们

版权所有 (c)2021-2022 MSHXW.COM

ICP备案号:晋ICP备2021003244-6号