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>
时间： 2024-08-24 10:37:49