AngularJS动态生成select下拉框的方法实例
网络编程 2021-07-04 15:02www.168986.cn编程入门
这篇文章主要给大家介绍了关于AngularJS动态生成select下拉框的相关资料，文中通过示例代码介绍的非常详细，对大家学习或者使用AngularJS具有一定的参考学习价值，需要的朋友们狼蚁网站SEO优化来一起学习学习吧
一、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./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./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 s"></select>
</div>
<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
$scope.s = [
{'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 s" 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 s"
其中，c.id 对应value ，c.name 对应label 。生成html代码为
<select ng-model="name" ng-options="c.id as c.name for c in s" 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./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 s" ng-model="name" ></select>
</div>
<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
$scope.s = [{'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 s" 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=s[0].id是因为在ng-options中通过 select as 为当前的select指定了s[0].id作为value的值；在写法一种未指定value值，则默认为s中 的一个对象。
-->
<select ng-init="name1=s[0]" ng-options="c.name for c in s" ng-model="name1"></select>
<select ng-init="name2=s[0].id" ng-options="c.id as c.name for c in s" ng-model="name2"></select>
<!--
方式二 在js代码中为ng-model绑定的变量赋值
-->
<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
$scope.s = [{'id':'baidu','name':'百度','type':'搜索'},
{'id':'Google', 'name':'谷歌','type':'搜索'},
{'id':'apple', 'name':'苹果','type':'手机'},
{'id':'TaoBao', 'name':'淘宝','type':'购物'}
];
// label for value in array
$scope.name1 = $scope.s[0];
// select as label for value in array
$scope.name2 = $scope.s[0].id;
});
</script>
2.对象作为数据源
- label for (key, value) in object
代码展示
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="https://cdn.staticfile./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./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=" in s" value="{{.name}}">{{.name}}</option>
</select>
</div>
<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
$scope.s = [{'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选择的值可以是一个对象。
好了，以上就是这篇文章的全部内容了，希望本文的内容对大家的学习或者工作具有一定的参考学习价值，谢谢大家对狼蚁SEO的支持。
编程语言
- 如何快速学会编程 如何快速学会ug编程
- 免费学编程的app 推荐12个免费学编程的好网站
- 电脑怎么编程：电脑怎么编程网咯游戏菜单图标
- 如何写代码新手教学 如何写代码新手教学手机
- 基础编程入门教程视频 基础编程入门教程视频华
- 编程演示：编程演示浦丰投针过程
- 乐高编程加盟 乐高积木编程加盟
- 跟我学plc编程 plc编程自学入门视频教程
- ug编程成航林总 ug编程实战视频
- 孩子学编程的好处和坏处
- 初学者学编程该从哪里开始 新手学编程从哪里入
- 慢走丝编程 慢走丝编程难学吗
- 国内十强少儿编程机构 中国少儿编程机构十强有
- 成人计算机速成培训班 成人计算机速成培训班办
- 孩子学编程网上课程哪家好 儿童学编程比较好的
- 代码编程教学入门软件 代码编程教程