<select ng-options="c.name group by c.type for c in coms" ng-model="name"> <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选择的值可以是一个对象。
好了，以上就是这篇文章的全部内容了，希望本文的内容对大家的学习或者工作具有一定的参考学习价值，谢谢大家对脚本之家的支持。
您可能感兴趣的文章: