DDR爱好者之家

AngularJS动态生成select下拉框的方法实例
站长资源 2024/11/24 佚名
74 1538
DDR爱好者之家 Design By 杰米

一、select相关知识

<select>
	<option value="0">HTML</option>
 <option value="1">Java</option>
 <option value="2">Python</option>
</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(数组中为字符串)

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="/UploadFiles/2021-04-02/angular.min.js">


最终得到的结果为：







<select ng-model="name" ng-options="name for name in names" class="ng-pristine ng-valid ng-touched">
 <option value="" selected="selected"></option>
 <option value="string:baidu" label="baidu">baidu</option>
 <option value="string:Google" label="Google">Google</option>
 <option value="string:apple" label="apple">apple</option>
</select>





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




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







<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="/UploadFiles/2021-04-02/angular.min.js">


最终得到的html代码为：







<!-- 注意：此处ng-model绑定的name变量并非选中项的name属性，而是选中项的全部属性
	如选中了索引为0项，则name={"id":"baidu","name":"百度"}
	这边ng-model绑定变量为值为select的value值
-->
<select ng-model="name" ng-options="c.id for c in coms" class="ng-pristine ng-valid ng-touched">
 <option value="" selected="selected"></option>
 <option value="object:3" label="baidu">baidu</option>
 <option value="object:4" label="Google">Google</option>
 <option value="object:5" label="apple">apple</option>
</select>





通过生成的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代码为：







<select ng-model="name" ng-options="c.id as c.name for c in coms" class="ng-pristine ng-valid ng-touched">
 <option value="" selected="selected"></option>
 <option value="string:baidu" label="百度">百度</option>
 <option value="string:Google" label="谷歌">谷歌</option>
 <option value="string:apple" label="苹果">苹果</option>
</select>





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







<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="/UploadFiles/2021-04-02/angular.min.js">


得到的html代码为：







<select ng-options="c.name group by c.type for c in coms" ng-model="name" class="ng-pristine ng-valid ng-touched">
 <optgroup label="搜索">
  <option value="object:3" label="百度" selected="selected">百度</option>
  <option value="object:4" label="谷歌">谷歌</option></optgroup>
 <optgroup label="手机">
  <option value="object:5" label="苹果">苹果</option>
 </optgroup>		
 <optgroup label="购物">
  <option value="object:6" label="淘宝">淘宝</option>
 </optgroup>
</select>





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




通过以上最终得到的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中	 的一个对象。
-->
<select ng-init="name1=coms[0]" ng-options="c.name for c in coms" ng-model="name1"></select>
<select ng-init="name2=coms[0].id" ng-options="c.id as c.name for c in coms" ng-model="name2"></select>

<!--
	方式二： 在js代码中为ng-model绑定的变量赋值
-->
<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
 $scope.coms = [{'id':'baidu','name':'百度','type':'搜索'}, 
				 {'id':'Google', 'name':'谷歌','type':'搜索'}, 
				 {'id':'apple', 'name':'苹果','type':'手机'},
				 {'id':'TaoBao', 'name':'淘宝','type':'购物'}
				];
 // label for value in array
	$scope.name1 = $scope.coms[0];
 
 // select as label for value in array
	$scope.name2 = $scope.coms[0].id;
});
</script>





2.对象作为数据源


    
  
  • label for (key, value) in object
    • 



代码展示







<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="/UploadFiles/2021-04-02/angular.min.js">


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




代码示例：







<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="/UploadFiles/2021-04-02/angular.min.js">


四、总结

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


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


                                

                                

                                     

                                
DDR爱好者之家 Design By 杰米

                            

                        

                        

                            

                                广告合作：本站广告合作请联系QQ：858582 申请时备注：广告合作（否则不回）

                                免责声明：本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除！
                            

                        

                        

                            
                            
                        

                        
                        
DDR爱好者之家 Design By 杰米
ddrfans.com DDR爱好者之家
8,675无损音乐
1,324高清电影
213破解软件
70,141收录资讯

《魔兽世界》大逃杀！60人新游玩模式《强袭风暴》3月21日上线

暴雪近日发布了《魔兽世界》10.2.6 更新内容，新游玩模式《强袭风暴》即将于3月21 日在亚服上线，届时玩家将前往阿拉希高地展开一场 60 人大逃杀对战。

艾泽拉斯的冒险者已经征服了艾泽拉斯的大地及遥远的彼岸。他们在对抗世界上最致命的敌人时展现出过人的手腕，并且成功阻止终结宇宙等级的威胁。当他们在为即将于《魔兽世界》资料片《地心之战》中来袭的萨拉塔斯势力做战斗准备时，他们还需要在熟悉的阿拉希高地面对一个全新的敌人──那就是彼此。在《巨龙崛起》10.2.6 更新的《强袭风暴》中，玩家将会进入一个全新的海盗主题大逃杀式限时活动，其中包含极高的风险和史诗级的奖励。

《强袭风暴》不是普通的战场，作为一个独立于主游戏之外的活动，玩家可以用大逃杀的风格来体验《魔兽世界》，不分职业、不分装备（除了你在赛局中捡到的），光是技巧和战略的强弱之分就能决定出谁才是能坚持到最后的赢家。本次活动将会开放单人和双人模式，玩家在加入海盗主题的预赛大厅区域前，可以从强袭风暴角色画面新增好友。游玩游戏将可以累计名望轨迹，《巨龙崛起》和《魔兽世界：巫妖王之怒 经典版》的玩家都可以获得奖励。

更新日志

友情链接

杰晶网络 DDR爱好者之家 南强小屋 黑松山资源网 白云城资源网
DDR爱好者之家 Design By 杰米