下拉式清單的簡單使用
ng-option指令使用很簡單，只需要綁定兩個屬性：
一個是ng-model用於擷取選定的值；
另一個是ng-options用於確定下拉式清單的元素數組。
<select ng-model="engineer.currentActivity" class="form-control" ng-options="act for act in activities"></select>
上面這條語句就是把選擇的值與engineer.currentActivity進行雙向資料繫結，然後列表中的選項是activities中的每一個值。資料如下：
$scope.engineer = {name: "Dani",currentActivity: "Fixing bugs"};$scope.activities =["Writing code","Testing code","Fixing bugs","Dancing"];
運行結果如：
為了美觀一點，這裡引用了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" href="http://apps.bdimg.com/libs/bootstrap/3.3.0/css/bootstrap.min.css"> <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>
複雜物件，自訂欄表名稱
有的時候下拉式清單並不是單純的字串數組，可能是json對象，例如：
$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" }];
這個時候，繫結資料就必須是與這裡面的格式相同的資料，比如直接複製其中一條：
$scope.engineer = {name: "Dani" ,currentActivity: {id: 3,type: "Work" ,name: "Fixing bugs"}};
當然也可以直接指定成：
$scope.engineer = {currentActivity:activities[3]}
然後在指令中可以迴圈列表拼接處下拉框的名稱
<select ng-model = "engineer.currentActivity"class="form-control"ng-options = "a.name +' (' + a.type + ')' for a in activities" > </select >
運行效果如：
全部的代碼如下：
<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" href="http://apps.bdimg.com/libs/bootstrap/3.3.0/css/bootstrap.min.css"> <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>
實現下拉式清單的分組
其實分組與前面的例子很像，只要把空間中的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 就會按照後面的值進行分組
全部代碼：
<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" href="http://apps.bdimg.com/libs/bootstrap/3.3.0/css/bootstrap.min.css"> <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進行標識
由於之前的ng-model相當於初始的時候給設定了一個值。當你選擇一個下拉式清單選項的時候，就會覆蓋掉這個初始值。
所以更多的時候會使用一個id進行標識，這樣在初始化賦值的時候，只需要設定一個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" }];
指令可以寫成下面的格式
<select ng-model = "engineer.currentActivityId"class="form-control"ng-options = "a.id as a.name group by a.type for a in activities" > </select >
通過 as 前面的值，就可以確定唯一的一個選項
全部代碼如下：
<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" href="http://apps.bdimg.com/libs/bootstrap/3.3.0/css/bootstrap.min.css"> <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實現下拉式清單的執行個體代碼，希望對大家有所協助。
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
