AngularJS动态生成select下拉框的方法实例
一、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中下拉框的基本用法示例
本文实例讲述了AngularJS中下拉框的基本用法.分享给大家供大家参考,具体如下: HTML正文: <div ng-app="myApp" ng-controller="myCtrl"> <select ng-model="selectedName" ng-options="x for x in names"></select> 等价于: <select> <option
-
Angular.JS中select下拉框设置value的方法
前言 本文主要给大家介绍的是关于Angular.JS中select下拉框设置value的相关内容,非常出来供大家参考学习,下面来一起看看详细的介绍: 最近在系统中增加一个查询的筛选条件,通过下拉框选取,用的是Angular常见的ng-options 指令: <select id="selectDetectUnit" class="form-control" ng-model="detectUnits" ng-options="de
-
AngularJS使用ng-repeat指令实现下拉框
AngularJs 的 ng-repeat 让我们非常方便的遍历数组生成 Dom 元素,但是使用不当也会有性能问题.下面给大家分享在项目中使用ng-repeat指令实现下拉框. 1.问题背景 select下拉框里option组装成下拉框,这里利用ng-repeat指令来创建 2.实现源码 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>AngularJS之
-
Angularjs实现带查找筛选功能的select下拉框示例代码
前言 对于select的下拉列表,像国家选择这样的功能,全世界那么多国家,一直拉滚动条多辛苦,眼睛也要盯着找,累!所以为优化用户体验,带查找功能的下拉框是非常非常有必要的.都知道jquery里有这样的插件,但我们用的是Angularjs,更希望用双向绑定,指令的方式优雅地解决这个问题. 分析 我们的目标是在原来的<select ng-options="">标签上新加一个属性 select-search 就能支持查找的功能.如果这个属性没起作用,也不影响原来的select的功
-
AngularJS使用ng-options指令实现下拉框
ng-option指令使用很简单,只需要绑定两个属性: 一个是ng-model用于获取选定的值: 另一个是ng-options用于确定下拉列表的元素数组. 1.问题背景 一般情况下,select下都会有option,但是AngularJS中有指令ng-options,就可以实现select下拉框 2.实现源码 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>
-
Angular实现下拉框模糊查询功能示例
本文实例讲述了Angular实现下拉框模糊查询功能.分享给大家供大家参考,具体如下: 前两天研究了一下angularjs,不得不说angularjs的mvc思想还是很强大的.对应偏重于数据处理的项目还是非常有优势的. 写了个搜索下拉框的demo,注释在里边都写了,就不再这罗嗦了. 1. 普通方式实现 <!DOCTYPE html> <html> <head lang="zh_CN"> <meta charset="utf-8"
-
angularjs 实现带查找筛选功能的select下拉框实例
一.背景 对于select的下拉列表,像国家选择这样的功能,全世界那么多国家,一直拉滚动条多辛苦,眼睛也要盯着找,累!so,为优化用户体验,带查找功能的下拉框是非常非常有必要的.都知道jquery里有这样的插件,但我们用的是Angularjs,更希望用双向绑定,指令的方式优雅地解决这个问题. 分析: 目标 在原来的<select ng-options="">标签上新加一个属性 select-search 就能支持查找的功能.如果这个属性没起作用,也不影响原来的sele
-
angularjs下拉框空白的解决办法
搜索angularjs下拉框空白,可以出现很多解决方案,但是对于静态字段来说,网上目前还没有找到解决方案,如下: <select class="form-control" ng-model="UserState" ng-init="UserState=0"> <option value="-1">选择状态</option> <option value="0">
-
Angularjs实现下拉框联动的示例代码
第一种联动方式,在网上看到的,感觉对于我的使用性不高,比较后端不会提供这种json... 实现截图 html <select ng-model="s1" ng-options="selectData.name for selectData in selectDatas"> <option value="">--产品类目--</option> </select> <select ng-model
-
AngularJS动态生成select下拉框的方法实例
一.select相关知识 <select> <option value="0">HTML</option> <option value="1">Java</option> <option value="2">Python</option> </select> 其中,value 是存储到数据库的值,在此处为0,1,2这些数值,label 为显示在页面的值
-
Ajax获取php返回json数据动态生成select下拉框的实例
功能:根据选择不同层次,在专业下拉框中动态生成对应分类的专业. HTML: <label>层次</label> <select name="level" id="level"> <option value="1">本科</option> <option value="2">高职(专科)</option> </select> <
-
ajax请求后台得到json数据后动态生成树形下拉框的方法
如下所示: <select id="cc" class="easyui-combotree" style="width:580px;" name="rempId" data-options="required:true"></select> <script> $(function(){ $.ajax({ url:"departmentAction_getAllD
-
Layui动态生成select下拉选择框不显示的解决方法
给代码添加如下部分: layui.use('form', function(){ //此段代码必不可少 var form = layui.form; form.render(); }); 实现效果: HTML代码: <div class="layui-form-item"> <label class="layui-form-label">执行周期</label> <div class="layui-input-in
-
jQGrid动态填充select下拉框的选项值(动态填充)
本文给大家分享一段代码关于技巧jqgrid动态填充select 下拉框的选项值,非常不多说了,直接给大家贴代码了,具体代码如下所示: function gettypes(){ //动态生成select内容 var str=""; $.ajax({ type:"post", async:false, url:"checkpersontype", success:function(data){ if (data != null) { var json
-
JavaScript动态操作select下拉框
相信在前端设计中必然不会少的了表单,因为经常会使用到下拉框选项,又或是把数据动态回显到下拉框中.因为之前牵扯到optgroup标签时遇到了问题,没查到太过详细的解决方案,自己动手操作记录一下. 首先就是咱们的老朋友"select"标签,因为需要js.jq两种操作,所以就定义两个select标签. HTML代码: <div style="width: 200px;height: 100px;margin: auto;margin-top: 100px;padding: 2
-
bootstrap动态调用select下拉框的实例代码
html代码: <label for="classify" class="col-sm-2 control-label">填报部门:</label> <div class="col-sm-3"> <select class="selectpicker form-control" data-live-search="true" name="addid&quo
-
Django forms表单 select下拉框的传值实例
今儿继续做项目,学习了Django的forms生成前端的代码. forms.py class SignupForm(forms.Form): username = forms.CharField(validators=[user_unique_validate, username_rule_validate, ], required=True, max_length=30, min_length=5, error_messages={'required': '用户名不能为空', 'max_len
-
JavaScript实现将数组数据添加到Select下拉框的方法
本文实例讲述了JavaScript实现将数组数据添加到Select下拉框的方法.分享给大家供大家参考.具体如下: 这里演示将数组中的数据添加到Select下拉菜单中的效果,当你点击下拉框的时候,就动态加载了数据,更换Select内容的时候,直接替换数组中的内容就可以了.适合前端设计者实现前台的部分本地化脚本操作. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/js-array-add-select-data-codes/ 具体代码如下: <!D
-
bootstrap中selectpicker下拉框使用方法实例
前言 最近一直在用bootstrap 的一些东西,写几篇博客记录下.... bootstrap selectpicker是bootstrap里比较简单的一个下拉框的组件,先看效果如下: 附上官网api链接,http://silviomoreto.github.io/bootstrap-select/. 下拉框的使用上基本操作一般是:单选.多选.模糊搜索.动态赋值等,下面来看如何使用: 使用方法如下 1.首先需要引入的css和js: bootstrap.css bootstrap-sele