首页
所有分类
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 相关文章推荐
jquery 学习之二 属性 文本与值(text,val)
Nov 25 Javascript
基于JQuery的多标签实现代码
Sep 19 Javascript
javascript 全选与全取消功能的实现代码
Dec 23 Javascript
通过一段代码简单说js中的this的使用
Jul 23 Javascript
js自动生成对象的属性示例代码
Oct 28 Javascript
jQuery搜索子元素的方法
Feb 10 Javascript
浅谈JavaScript中运算符的优先级
Jul 07 Javascript
JavaScript时间操作之年月日星期级联操作
Jan 15 Javascript
通过bootstrap全面学习less
Nov 09 Javascript
jQuery操作json常用方法示例
Jan 04 Javascript
vue插件实现v-model功能
Sep 10 Javascript
浅谈Vue服务端渲染框架Nuxt的那些事
Dec 21 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
Excel(4) Coroutine(1) enumerate(1) pytest(3) list(1) greenlet(1) 进销存(1) csv(4) gevent(1) find(1)
You might like
用定制的PHP应用程序来获取Web服务器的状态信息
2006/10/09 PHP
PHP运行模式的深入理解
2013/06/03 PHP
php验证身份证号码正确性的函数
2016/07/20 PHP
thinkPHP2.1自定义标签库的导入方法详解
2016/07/20 PHP
php getcwd与dirname(__FILE__)区别详解
2016/09/24 PHP
js 关键词高亮(根据ID/tag高亮关键字)案例介绍
2013/01/21 Javascript
如何使用Javascript获取距今n天前的日期
2013/07/08 Javascript
JQuery与JS里submit()的区别示例介绍
2014/02/17 Javascript
js中的如何定位固定层的位置
2014/06/15 Javascript
node爬取微博的数据的简单封装库nodeweibo使用指南
2015/01/02 Javascript
基于bootstrap插件实现autocomplete自动完成表单
2016/05/07 Javascript
JavaScript对象数组排序实例方法浅析
2016/06/15 Javascript
JS实现添加,替换,删除节点元素的方法
2016/06/30 Javascript
js中常用的Math方法总结
2017/01/12 Javascript
使用jQuery操作DOM的方法小结
2017/02/27 Javascript
Angular 开发学习之Angular CLI的安装使用
2017/12/31 Javascript
NodeJS简单实现WebSocket功能示例
2018/02/10 NodeJs
vue 解决无法对未定义的值,空值或基元值设置反应属性报错问题
2020/07/31 Javascript
介绍Python中内置的itertools模块
2015/04/29 Python
Python中的is和==比较两个对象的两种方法
2017/09/06 Python
python3.4爬虫demo
2019/01/22 Python
Python 仅获取响应头, 不获取实体的实例
2019/08/21 Python
用canvas实现图片滤镜效果附演示
2013/11/05 HTML / CSS
美国知名的百货清仓店：Neiman Marcus Last Call
2016/08/03 全球购物
Shopping happy life西班牙：以最优惠的价格提供最好的时尚配饰
2020/03/13 全球购物
Myprotein亚太地区：欧洲第一在线运动营养品牌
2020/12/20 全球购物
新护士岗前培训制度
2014/02/02 职场文书
文员的职业生涯规划发展方向
2014/02/08 职场文书
歌唱比赛主持词
2014/03/18 职场文书
家长写给孩子的评语
2014/04/18 职场文书
汽车广告策划方案
2014/05/31 职场文书
学校感恩节活动策划方案
2014/10/06 职场文书
周一给客户的问候语
2015/11/10 职场文书
学长教您写论文：经验总结
2019/07/09 职场文书
Spring Boot配合PageHelper优化大表查询数据分页
2022/04/20 Java/Android
table设置超出部分隐藏，鼠标移上去显示全部内容的方法
2022/12/24 HTML / CSS