AngularJS使用ngOption實(shí)現(xiàn)下拉列表的實(shí)例代碼

更新時(shí)間：2016年01月23日 11:59:04 作者：盜夢(mèng)者

這篇文章主要介紹了AngularJS使用ngOption實(shí)現(xiàn)下拉列表的實(shí)例代碼的相關(guān)資料,需要的朋友可以參考下

下拉列表的簡(jiǎn)單使用

ng-option指令使用很簡(jiǎn)單，只需要綁定兩個(gè)屬性：

一個(gè)是ng-model用于獲取選定的值；

另一個(gè)是ng-options用于確定下拉列表的元素?cái)?shù)組。

<select ng-model="engineer.currentActivity" class="form-control" ng-options="act for act in activities"></select>

上面這條語(yǔ)句就是把選擇的值與engineer.currentActivity進(jìn)行雙向數(shù)據(jù)綁定，然后列表中的選項(xiàng)是activities中的每一個(gè)值。數(shù)據(jù)如下：

$scope.engineer = {
name: "Dani",
currentActivity: "Fixing bugs"
};
$scope.activities =
[
"Writing code",
"Testing code",
"Fixing bugs",
"Dancing"
];

運(yùn)行結(jié)果如：

為了美觀一點(diǎn)，這里引用了bootstrap。

<html ng-app="myApp">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script src="http://apps.bdimg.com/libs/angular.js/1.2.16/angular.min.js"></script>
<link rel="stylesheet" > 
<script src="http://apps.bdimg.com/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://apps.bdimg.com/libs/bootstrap/3.3.0/js/bootstrap.min.js"></script>
</head>
<body>
<div ng-controller="EngineeringController" class="container">
<div class="col-md-12">
{{engineer.name}} is currently: {{ engineer.currentActivity}}
</div>
<div class="col-md-4">
<label for="name">Choose a new activity:</label>
<select ng-model="engineer.currentActivity" class="form-control"
ng-options="act for act in activities"> 
</select>
</div>
</div>
<script type="text/javascript">
var myAppModule = angular.module("myApp",[]);
myAppModule.controller("EngineeringController",["$scope",function($scope){
$scope.engineer = {
name: "Dani",
currentActivity: "Fixing bugs"
};
$scope.activities =
[
"Writing code",
"Testing code",
"Fixing bugs",
"Dancing"
];
}]);
</script>
</body>
</html>

復(fù)雜對(duì)象，自定義列表名稱

有的時(shí)候下拉列表并不是單純的字符串?dāng)?shù)組，可能是json對(duì)象，例如：

$scope.activities =
[
{ id: 1, type: "Work" , name: "Writing code" },
{ id: 2, type: "Work" , name: "Testing code" },
{ id: 3, type: "Work" , name: "Fixing bugs" },
{ id: 4, type: "Play" , name: "Dancing" }
];

這個(gè)時(shí)候，綁定的數(shù)據(jù)就必須是與這里面的格式相同的數(shù)據(jù)，比如直接復(fù)制其中一條：

$scope.engineer = {
name: "Dani" ,
currentActivity: {
id: 3,
type: "Work" ,
name: "Fixing bugs"
}
};

當(dāng)然也可以直接指定成：

$scope.engineer = {currentActivity:activities[3]}

然后在指令中可以循環(huán)列表拼接處下拉框的名稱

<select 
ng-model = "engineer.currentActivity"
class="form-control"
ng-options = "a.name +' (' + a.type + ')' for a in activities" > 
</select >

運(yùn)行效果如：

全部的代碼如下：

<html ng-app="myApp">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script src="http://apps.bdimg.com/libs/angular.js/1.2.16/angular.min.js"></script>
<link rel="stylesheet" > 
<script src="http://apps.bdimg.com/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://apps.bdimg.com/libs/bootstrap/3.3.0/js/bootstrap.min.js"></script>
</head>
<body>
<div ng-controller="EngineeringController" class="container">
<div class="col-md-12">
{{engineer.name}} is currently: {{ engineer.currentActivity}}
</div>
<div class="col-md-4">
<label for="name">Choose a new activity:</label> 
<select 
ng-model = "engineer.currentActivity"
class="form-control"
ng-options = "a.name +' (' + a.type + ')' for a in activities" > 
</select > 
</div>
</div>
<script type="text/javascript">
var myAppModule = angular.module("myApp",[]);
myAppModule.controller("EngineeringController",["$scope",function($scope){
$scope.engineer = {
name: "Dani" ,
currentActivity: {
id: 3,
type: "Work" ,
name: "Fixing bugs"
}
};
$scope.activities =
[
{ id: 1, type: "Work" , name: "Writing code" },
{ id: 2, type: "Work" , name: "Testing code" },
{ id: 3, type: "Work" , name: "Fixing bugs" },
{ id: 4, type: "Play" , name: "Dancing" }
];
}]);
</script>
</body>
</html>

實(shí)現(xiàn)下拉列表的分組

其實(shí)分組與前面的例子很像，只要把空間中的ng-options的值換成下面：

<select ng-model = "engineer.currentActivity"
class="form-control"
ng-options = "a.name group by a.type for a in activities" > 
</select >

添加 group by 就會(huì)按照后面的值進(jìn)行分組

全部代碼：

<html ng-app="myApp">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script src="http://apps.bdimg.com/libs/angular.js/1.2.16/angular.min.js"></script>
<link rel="stylesheet" > 
<script src="http://apps.bdimg.com/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://apps.bdimg.com/libs/bootstrap/3.3.0/js/bootstrap.min.js"></script>
</head>
<body>
<div ng-controller="EngineeringController" class="container">
<div class="col-md-12">
{{engineer.name}} is currently: {{ engineer.currentActivity}}
</div>
<div class="col-md-4">
<label for="name">Choose a new activity:</label> 
<!-- <select 
ng-model = "engineer.currentActivity"
class="form-control"
ng-options = "a.name +' (' + a.type + ')' for a in activities" > 
</select > -->
<select ng-model = "engineer.currentActivity"
class="form-control"
ng-options = "a.name group by a.type for a in activities" > 
</select > 
</div>
</div>
<script type="text/javascript">
var myAppModule = angular.module("myApp",[]);
myAppModule.controller("EngineeringController",["$scope",function($scope){
$scope.engineer = {
name: "Dani" ,
currentActivity: {
id: 3,
type: "Work" ,
name: "Fixing bugs"
}
};
$scope.activities =
[
{ id: 1, type: "Work" , name: "Writing code" },
{ id: 2, type: "Work" , name: "Testing code" },
{ id: 3, type: "Work" , name: "Fixing bugs" },
{ id: 4, type: "Play" , name: "Dancing" }
];
}]);
</script>
</body>
</html>

按照id進(jìn)行標(biāo)識(shí)

由于之前的ng-model相當(dāng)于初始的時(shí)候給設(shè)定了一個(gè)值。當(dāng)你選擇一個(gè)下拉列表選項(xiàng)的時(shí)候，就會(huì)覆蓋掉這個(gè)初始值。

所以更多的時(shí)候會(huì)使用一個(gè)id進(jìn)行標(biāo)識(shí)，這樣在初始化賦值的時(shí)候，只需要設(shè)定一個(gè)id就可以了。

$scope.engineer = {
currentActivityId: 3
};
$scope.activities =
[
{ id: 1, type: "Work" , name: "Writing code" },
{ id: 2, type: "Work" , name: "Testing code" },
{ id: 3, type: "Work" , name: "Fixing bugs" },
{ id: 4, type: "Play" , name: "Dancing" }
];

指令可以寫(xiě)成下面的格式

<select 
ng-model = "engineer.currentActivityId"
class="form-control"
ng-options = "a.id as a.name group by a.type for a in activities" > 
</select >

通過(guò) as 前面的值，就可以確定唯一的一個(gè)選項(xiàng)

全部代碼如下：

<html ng-app="myApp">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script src="http://apps.bdimg.com/libs/angular.js/1.2.16/angular.min.js"></script>
<link rel="stylesheet" > 
<script src="http://apps.bdimg.com/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://apps.bdimg.com/libs/bootstrap/3.3.0/js/bootstrap.min.js"></script>
</head>
<body>
<div ng-controller="EngineeringController" class="container">
<div class="col-md-12">
current is: {{ engineer.currentActivityId}}
</div>
<div class="col-md-4">
<label for="name">Choose a new activity:</label> 
<select 
ng-model = "engineer.currentActivityId"
class="form-control"
ng-options = "a.id as a.name group by a.type for a in activities" > 
</select > 
</div>
</div>
<script type="text/javascript">
var myAppModule = angular.module("myApp",[]);
myAppModule.controller("EngineeringController",["$scope",function($scope){
$scope.engineer = {
currentActivityId: 3
};
$scope.activities =
[
{ id: 1, type: "Work" , name: "Writing code" },
{ id: 2, type: "Work" , name: "Testing code" },
{ id: 3, type: "Work" , name: "Fixing bugs" },
{ id: 4, type: "Play" , name: "Dancing" }
];
}]);
</script>
</body>
</html>

以上所述是小編給大家分享的AngularJS使用ngOption實(shí)現(xiàn)下拉列表的實(shí)例代碼，希望對(duì)大家有所幫助。

您可能感興趣的文章: