首页
所有分类
TAGS
文字工具 EMOJI BIBLE
编程 Javascript

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

Posted in Javascript onNovember 17, 2019

一、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="https://cdn.staticfile.org/angular.js/1.4.6/angular.min.js"></script>
</head>
<body>

<div ng-app="myApp" ng-controller="myCtrl">
 <!--
		这里的label和value需一致，否则会报错
		表达式语法：label for value in array
	-->
	<select ng-model="name" ng-options="name for name in names"></select>
</div>

<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
 $scope.names = ['baidu', 'Google', 'apple'];
});
</script>
</body>
</html>

最终得到的结果为：

<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="https://cdn.staticfile.org/angular.js/1.4.6/angular.min.js"></script>
</head>
<body>
<div ng-app="myApp" ng-controller="myCtrl">
 <!--
		表达式语法：label for value in array
	-->
	<select ng-model="name" ng-options="c.id for c in coms"></select>
</div>
<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
 $scope.coms = [
  {'id':'baidu','name':'百度'}, 
  {'id':'Google', 'name':'谷歌'}, 
  {'id':'apple', 'name':'苹果'}];
});
</script>
</body>
</html>

最终得到的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="https://cdn.staticfile.org/angular.js/1.4.6/angular.min.js"></script>
</head>
<body>

<div ng-app="myApp" ng-controller="myCtrl">
 <!--
		表达式语法：label group by group for value in array
	-->
	<select ng-options="c.name group by c.type for c in coms" ng-model="name" ></select>
</div>

<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':'购物'}
				];
});
</script>
</body>
</html>

得到的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="https://cdn.staticfile.org/angular.js/1.4.6/angular.min.js"></script>
</head>
<body>

<div ng-app="myApp" ng-controller="myCtrl">
	{{name4}}
 <!-- 
		表达式语法：select as label for (key, value) in object
	-->
	<select ng-options="value as key for (key, value) in province" ng-model='name4'></select>
</div>
<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {	
	$scope.province = {
		'北京':'京',
		'山西':'晋',
		'上海':'沪',
	};
});
</script>
</body>
</html>

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="https://cdn.staticfile.org/angular.js/1.4.6/angular.min.js"></script>
</head>
<body>

<div ng-app="myApp" ng-controller="myCtrl">
	<select>
		<option value="" selected="selected">====请选择====</option>
		<option ng-repeat="com in coms" value="{{com.name}}">{{com.name}}</option>
	</select>
</div>

<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':'购物'}
				];
});
</script>
</body>
</html>

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

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

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

- Author -

Wang Xiaojiang

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐
ExtJS Ext.MessageBox.alert()弹出对话框详解
Apr 02 Javascript
js更优雅的兼容
Aug 12 Javascript
JavaScript中获取高度和宽度函数总结
Oct 08 Javascript
了解Javascript的模块化开发
Mar 02 Javascript
JSON与XML优缺点对比分析
Jul 17 Javascript
jQuery实现进度条效果代码
Dec 17 Javascript
JavaScipt选取文档元素的方法(推荐)
Aug 05 Javascript
react实现pure render时bind(this)隐患需注意!
Mar 09 Javascript
Bootstrap实现的标签页内容切换显示效果示例
May 25 Javascript
Vue 多层组件嵌套二种实现方式(测试实例)
Sep 08 Javascript
JavaScript基础之静态方法和实例方法分析
Dec 26 Javascript
基于Vue+elementUI实现动态表单的校验功能(根据条件动态切换校验格式)
Apr 04 Javascript
24行JavaScript代码实现Redux的方法实例
Nov 17 #Javascript
JavaScript如何处理移动端拍摄图片旋转问题
Nov 16 #Javascript
JS Ajax请求会话过期处理问题解决方法分析
Nov 16 #Javascript
vue中注册自定义的全局js方法
Nov 15 #Javascript
微信sdk实现禁止微信分享(使用原生php实现)
Nov 15 #Javascript
微信JSSDK实现打开摄像头拍照再将相片保存到服务器
Nov 15 #Javascript
微信小程序自定义导航栏（模板化）
Nov 15 #Javascript
逻辑函数(1) zabbix(9) keeplive_timeout(1) BufferPool(1) RTMP(1) 缓存机制(1) text-shadow(1) 复合索引(1) http_stub_status_module(1) location(2)
You might like
php简单对象与数组的转换函数代码(php多层数组和对象的转换)
2011/05/18 PHP
PHP中遍历stdclass object的实现代码
2011/06/09 PHP
php中json_decode()和json_encode()的使用方法
2012/06/04 PHP
php备份数据库类分享
2015/04/14 PHP
PHP实现简单实用的验证码类
2015/07/29 PHP
详解PHP中websocket的使用方法
2016/09/15 PHP
laravel 自定义常量的两种方案
2019/10/14 PHP
PHP程序员简单的开展服务治理架构操作详解(三)
2020/05/14 PHP
javascript 验证日期的函数
2010/03/18 Javascript
DIV菜单层实现代码
2010/11/19 Javascript
Jsonp 跨域的原理以及Jquery的解决方案
2011/06/27 Javascript
纯Javascript实现Windows 8 Metro风格实现
2013/10/15 Javascript
利用JavaScript的AngularJS库制作电子名片的方法
2015/06/18 Javascript
javascirpt实现2个iframe之间传值的方法
2016/06/30 Javascript
Bootstrap菜单按钮及导航实例解析
2016/09/09 Javascript
js判断价格,必须为数字且不能为负数的实现方法
2016/10/07 Javascript
使用node.js搭建服务器
2017/05/20 Javascript
React+react-dropzone+node.js实现图片上传的示例代码
2017/08/23 Javascript
Vue如何获取数据列表展示
2019/12/11 Javascript
vue+element获取el-table某行的下标,根据下标操作数组对象方式
2020/08/07 Javascript
python将回车作为输入内容的实例
2018/06/23 Python
django用户登录验证的完整示例代码
2019/07/21 Python
Pytorch之view及view_as使用详解
2019/12/31 Python
使用Python构造hive insert语句说明
2020/06/06 Python
Keras - GPU ID 和显存占用设定步骤
2020/06/22 Python
英国领先的品牌珠宝和配件供应商：Acotis Jewellery
2018/03/07 全球购物
阿玛尼美妆英国官网：Giorgio Armani Beauty英国
2019/03/28 全球购物
Does C# support multiple inheritance? (C#支持多重继承吗)
2012/01/04 面试题
SOA面试题：如何在SOA中实现松耦合
2013/07/21 面试题
机械制造专业个人的自我评价
2013/12/28 职场文书
优秀士兵先进事迹
2014/02/06 职场文书
高二物理教学反思
2014/02/08 职场文书
外语系毕业生求职自荐信
2014/04/12 职场文书
领导班子专题民主生活会情况想汇报
2014/09/30 职场文书
院党委组织查摆问题对照检查材料思想汇报2014
2014/10/08 职场文书
七年级话题作文之执着
2019/11/19 职场文书