select 无默认选择一项
<select name="" id="" class="form-control" ng-options="item.id for item in optData" ng-model="selected"> <!-- item.id是label 显示出来的 item是value 选中的数据object --> <option value="">---请选择---</option> </select>
select 有默认选择一项
$scope.selected=$scope.optData[1];
select其他
//字符拼接 <select name="" id="" class="form-control" ng-options="(item.id+' '+item.ProductName) for item in optData" ng-model="selected"></select> //分组 label group by groupName for value in Array <select name="" id="" class="form-control" ng-model="selected" ng-options="item.id group by item.MainCategory for item in optData"> </select> //下面selected的值为optData的id select as label for value in Array <select name="" id="" class="form-control" ng-model="selected" ng-options="item.id as item.ProductName for item in optData"></select> //多级列表 <select name="" id="" class="form-control" ng-options="obj.name for obj in people" ng-model="selectedPerson"> </select> <select name="" id="" class="form-control" ng-model="selectedGenre"> <option ng-repeat="label in people[selectedPerson.id].interest">{{label}}</option> </select>
ng-options的内容：
- for array data sources:
labelforvalueinarrayselectaslabelforvalueinarraylabelgroup bygroupforvalueinarraylabeldisable whendisableforvalueinarraylabelgroup bygroupforvalueinarraytrack bytrackexprlabeldisable whendisableforvalueinarraytrack bytrackexprlabelforvalueinarray| orderBy:orderexprtrack bytrackexpr(for including a filter withtrack by)
- for object data sources:
labelfor (key,value) inobjectselectaslabelfor (key,value) inobjectlabelgroup bygroupfor (key,value) inobjectlabeldisable whendisablefor (key,value) inobjectselectaslabelgroup bygroupfor(key,value) inobjectselectaslabeldisable whendisablefor(key,value) inobject
自己的代码：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <link rel="stylesheet" href="http://cdn.static.runoob.com/libs/bootstrap/3.3.7/css/bootstrap.min.css"> <script src="http://cdn.static.runoob.com/libs/jquery/2.1.1/jquery.min.js"></script> <script src="http://cdn.static.runoob.com/libs/angular.js/1.4.6/angular.min.js"></script> <script src="http://cdn.bootcss.com/angular-ui-bootstrap/2.2.0/ui-bootstrap-tpls.js"></script> <script src="https://cdn.bootcss.com/angular-i18n/1.5.8/angular-locale_zh-cn.js"></script> <script> angular.module('m1',['ui.bootstrap']) .controller('ngselect',function($scope){ $scope.optData=[ {id:10001,MainCategory:'男',ProductName:'水洗T桖',ProductColor:'白'}, {id:10002,MainCategory:'男',ProductName:'干洗毛衣',ProductColor:'黑'}, {id:10003,MainCategory:'女',ProductName:'干洗毛衣',ProductColor:'篮'}, {id:10004,MainCategory:'女',ProductName:'水洗T桖',ProductColor:'红'} ] }) .controller('ngselect1',function($scope){ $scope.optData=[ {id:10001,MainCategory:'男',ProductName:'水洗T桖',ProductColor:'白'}, {id:10002,MainCategory:'男',ProductName:'干洗毛衣',ProductColor:'黑'}, {id:10003,MainCategory:'女',ProductName:'干洗毛衣',ProductColor:'篮'}, {id:10004,MainCategory:'女',ProductName:'水洗T桖',ProductColor:'红'} ]; $scope.selected=$scope.optData[1]; }) .controller('ngselect2',function($scope){ $scope.optData=[ {id:10001,MainCategory:'男',ProductName:'水洗T桖',ProductColor:'白'}, {id:10002,MainCategory:'男',ProductName:'干洗毛衣',ProductColor:'黑'}, {id:10003,MainCategory:'女',ProductName:'干洗毛衣',ProductColor:'篮'}, {id:10004,MainCategory:'女',ProductName:'水洗T桖',ProductColor:'红'} ]; $scope.selected=$scope.optData[1].id; }) .controller('ngselect3',function($scope){ $scope.people = [ { id: 0, name: '张三', interest: [ '爬山', '游泳', '旅游', '美食' ] }, { id: 1, name: '李四', interest: [ '音乐', '美食', 'Coffee', '看书' ] }, { id: 2, name: '王五', interest: [ '音乐', '电影', '中国好声音', '爸爸去哪了', '非常静距离' ] }, { id: 3, name: '小白', interest: [ '游泳', '游戏', '宅家里' ] } ]; }) </script> </head> <body ng-app="m1"> <div class="container"> <h1>下拉列表</h1> <div ng-controller="ngselect"> <h4>无默认选择 label for value in array</h4> <div class="col-xs-6"> <select name="" id="" class="form-control" ng-options="item.id for item in optData" ng-model="selected"> <!-- item.id是label 显示出来的 item是value 选中的数据object --> <option value="">---请选择---</option> </select> </div> <div class="col-xs-6"> <input type="text" class="form-control" value="{{selected.id+'--'+selected.ProductName+'--'+selected.MainCategory}}" > </div> <p class="well">添加一个'option'</p> </div> <div ng-controller="ngselect1"> <h4>默认选择一项</h4> <div class="col-xs-6"><select name="" id="" class="form-control" ng-options="item.id for item in optData" ng-model="selected"></select></div> <div class="col-xs-6"><select name="" id="" class="form-control" ng-options="(item.id+' '+item.ProductName) for item in optData" ng-model="selected"></select></div> <div class="col-xs-6"> <select name="" id="" class="form-control" ng-model="selected" ng-options="item.id group by item.MainCategory for item in optData"></select> </div> </div> <div ng-controller="ngselect2"> <div class="col-xs-6"> <select name="" id="" class="form-control" ng-model="selected" ng-options="item.id as item.ProductName for item in optData"></select> <input type="text" ng-model="selected"> </div> </div> <div ng-controller="ngselect3"> <div class="col-xs-3"> <select name="" id="" class="form-control" ng-options="obj.name for obj in people" ng-model="selectedPerson"> </select> </div> <div class="col-xs-3"> <select name="" id="" class="form-control" ng-model="selectedGenre"> <option ng-repeat="label in people[selectedPerson.id].interest">{{label}}</option> </select> </div> </div> </div> </body> </html>