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

时间：2021-05-28

一、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">  <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">  <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代码为：

<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 值显示为数据类型，而实际想要得到的结果是显示我们选中的值，因此需要写为：

ng-options="c.id as c.name for c in coms"

其中，c.id 对应value ，c.name 对应label 。生成html代码为：

代码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">  <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代码为：

注意事项(默认选中问题)

通过以上最终得到的HTML代码可以发现，每次生成的代码都会默认选中一个空白的选项，如果需要手动指定一个默认选中值应该怎么设置？

我们有两种方式(此处代码不完整，验证时请将html部分补充完整)：

<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><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 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下拉框的方法实例

相关文章

利用jquery实现下拉框的禁用与启用

js实现Select下拉框具有输入功能的方法

Python爬虫之Selenium下拉框处理的实现

select获取下拉框的值 下拉框默认选中方法

JavaScript实现将数组数据添加到Select下拉框的方法

select获取下拉框的值下拉框默认选中方法