一、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.数组作为数据源
代码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.对象作为数据源
代码展示
<!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:
for object data sources:
三、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选择的值可以是一个对象。
如果觉得我的文章对您有用,请随意打赏。你的支持将鼓励我继续创作!