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 相关文章推荐
Jsonp 跨域的原理以及Jquery的解决方案
May 18 Javascript
jQuery对html元素取值与赋值的方法
Nov 20 Javascript
JS仿Windows开机启动Loading进度条的方法
Feb 26 Javascript
JQuery中$.each 和$(selector).each()的区别详解
Mar 13 Javascript
Angular懒加载机制刷新后无法回退的快速解决方法
Aug 30 Javascript
Vue.js系列之vue-router(上)(3)
Jan 03 Javascript
jquery实现刷新随机变化样式特效(tag标签样式)
Feb 03 Javascript
javascript数组去重常用方法实例分析
Apr 11 Javascript
JavaScript实现简单的星星评分效果
May 18 Javascript
JavaScript对象的特性与实践应用深入详解
Dec 30 Javascript
浅谈React Native 传参的几种方式(小结)
May 21 Javascript
vue.js页面加载执行created,mounted的先后顺序说明
Nov 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
PHP实现的简单在线计算器功能示例
2017/08/02 PHP
IE7提供XMLHttpRequest对象为兼容
2007/03/08 Javascript
25个优雅的jQuery Tooltip插件推荐
2011/05/25 Javascript
jQuery div层的放大与缩小简单实现代码
2013/03/28 Javascript
js如何判断用户是在PC端和还是移动端访问
2014/04/24 Javascript
javascript记录文本框内文字个数检测文字个数变化
2014/10/14 Javascript
JavaScript中的console.time()函数详细介绍
2014/12/29 Javascript
完美兼容多浏览器的js判断图片路径代码汇总
2015/04/17 Javascript
JavaScript取得WEB安全颜色列表的方法
2015/07/14 Javascript
jQuery树形下拉菜单特效代码分享
2015/08/15 Javascript
详解jQuery中的事件
2016/12/14 Javascript
JS常用的几种数组遍历方式以及性能分析对比实例详解
2018/04/11 Javascript
jQuery中常用动画效果函数知识点整理
2018/08/19 jQuery
JS实现点击按钮随机生成可拖动的不同颜色块示例
2019/01/30 Javascript
详解Vue项目中实现锚点定位
2019/04/24 Javascript
nodejs搭建本地服务器并访问文件操作示例
2019/05/11 NodeJs
javascript实现导航栏分页效果
2019/06/27 Javascript
深入理解Antd-Select组件的用法
2020/02/25 Javascript
vue实现评价星星功能
2020/06/30 Javascript
Python减少循环层次和缩进的技巧分析
2016/03/15 Python
[原创]windows下Anaconda的安装与配置正解(Anaconda入门教程)
2018/04/05 Python
Python 3.6 读取并操作文件内容的实例
2018/04/23 Python
Python QQBot库的QQ聊天机器人
2019/06/19 Python
执行Django数据迁移时报 1091错误及解决方法
2019/10/14 Python
python自动分箱,计算woe,iv的实例代码
2019/11/22 Python
HTML5+lufylegend实现游戏中的卷轴
2016/02/29 HTML / CSS
英国标志性奢侈品牌:Burberry
2016/07/28 全球购物
美国最顶级的精品店之一:Hampden Clothing
2016/12/22 全球购物
西班牙灯具网上商店:Lampara.es
2018/06/05 全球购物
乌克兰电子和家用电器商店:Foxtrot
2019/07/23 全球购物
报社实习生自荐信
2014/01/24 职场文书
模具设计与制造专业推荐信
2014/02/16 职场文书
农村党支部书记党群众路线四风问题整改措施
2014/09/26 职场文书
个人四风问题整改措施思想汇报
2014/10/04 职场文书
三行辞职书范文
2015/02/26 职场文书
Javascript设计模式之原型模式详细
2021/10/05 Javascript