AngularJS之动态生成select下拉框

时间  2019-11-17
标签 angularjs 动态 生成 select 下拉 栏目 AngularJS 繁體版
原文   原文链接

1、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这些字符。html

2、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>
复制代码

最终获得的结果为：angularjs

<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 值显示为数据类型，而实际想要获得的结果是显示咱们选中的值，所以须要写为：app

<!-- 表达式语法: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代码为：spa

<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代码能够发现，每次生成的代码都会默认选中一个空白的选项，若是须要手动指定一个默认选中值应该怎么设置？code

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

<!-- 以代码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:htm

  • 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

3、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>
复制代码

4、总结

使用ng-repeat动态生成select比ng-option略微简单，可是ng-repeat有必定的局限性，选择的值只能是一个字符串，而使用ng-option选择的值能够是一个对象。

相关文章
相关标签/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公众号
   欢迎关注本站公众号,获取更多信息
联系我们 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程