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

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

Javascript 相关文章推荐
锋利的jQuery 要点归纳(二) jQuery中的DOM操作(下)
Mar 23 Javascript
JavaScript中链式调用之研习
Apr 07 Javascript
远离JS灾难css灾难之 js私有函数和css选择器作为容器
Dec 11 Javascript
提升PHP安全:8个必须修改的PHP默认配置
Nov 17 Javascript
JavaScript实现数据类型的相互转换
Mar 06 Javascript
关于动态生成dom绑定事件失效的原因及解决方法
Aug 06 Javascript
总结Javascript中数组各种去重的方法
Oct 04 Javascript
移动端界面的适配
Jan 11 Javascript
javascript实现对话框功能警告(alert 消息对话框)确认(confirm 消息对话框)
May 07 Javascript
vue-router结合vuex实现用户权限控制功能
Nov 14 Javascript
element el-tree组件的动态加载、新增、更新节点的实现
Feb 27 Javascript
基于Electron实现桌面应用开发代码实例
Jul 07 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
You might like
Windows下XDebug 手工配置与使用说明
2010/07/11 PHP
php二维数组合并及去重复的方法
2015/03/04 PHP
解决php 处理 form 表单提交多个 name 属性值相同的 input 标签问题
2017/05/11 PHP
ThinkPHP框架实现的MySQL数据库备份功能示例
2018/05/24 PHP
JQuery Tips(2) 关于$()包装集你不知道的
2009/12/14 Javascript
不同浏览器的怪癖小结
2010/07/11 Javascript
为JavaScript提供睡眠功能(sleep) 自编译JS引擎
2010/08/16 Javascript
JQuery扩展插件Validate 3通过参数设置错误信息
2011/09/05 Javascript
js和jquery对dom节点的操作(创建/追加)
2013/04/21 Javascript
使用nodejs、Python写的一个简易HTTP静态文件服务器
2014/07/18 NodeJs
在JavaScript中重写jQuery对象的方法实例教程
2014/08/25 Javascript
jQuery实现表格颜色交替显示的方法
2015/03/09 Javascript
jquery UI Datepicker时间控件的使用方法(终结版)
2015/11/07 Javascript
封装好的javascript前端分页插件pagination
2016/01/04 Javascript
百度坐标(BD09)、国测局坐标(火星坐标,GCJ02)、和WGS84坐标系之间的转换
2016/02/19 Javascript
ES6通过babel转码使用webpack使用import关键字
2016/12/13 Javascript
vue.js实现含搜索的多种复选框(附源码)
2017/03/23 Javascript
JS实现带导航城市列表以及输入搜索功能
2018/01/04 Javascript
Vuex实现计数器以及列表展示效果
2018/03/10 Javascript
vue实现简单loading进度条
2018/06/06 Javascript
JavaScript高级函数应用之分时函数实例分析
2018/08/03 Javascript
三分钟教你用Node做一个微信哄女友(基友)神器(面向小白)
2019/06/21 Javascript
node.js中fs文件系统模块的使用方法实例详解
2020/02/13 Javascript
使用python3.5仿微软记事本notepad
2016/06/15 Python
python爬虫的工作原理
2017/03/05 Python
python3 破解 geetest(极验)的滑块验证码功能
2018/02/24 Python
Python高斯消除矩阵
2019/01/02 Python
学习Django知识点分享
2019/09/11 Python
Pytorch 实现数据集自定义读取
2020/01/18 Python
jupyter notebook 增加kernel教程
2020/04/10 Python
如何基于python实现不邻接植花
2020/05/01 Python
Java byte数组操纵方式代码实例解析
2020/07/22 Python
推荐10个HTML5响应式框架
2016/02/25 HTML / CSS
伊莱克斯阿根廷网上商店:Tienda Electrolux
2021/03/08 全球购物
演讲稿开场白
2014/01/13 职场文书
关爱残疾人演讲稿
2014/05/24 职场文书