AngularJS使用ngOption實現(xiàn)下拉列表的實例代碼
更新時間：2016年01月23日 11:59:04 作者：盜夢者
這篇文章主要介紹了AngularJS使用ngOption實現(xiàn)下拉列表的實例代碼的相關資料,需要的朋友可以參考下
下拉列表的簡單使用
ng-option指令使用很簡單，只需要綁定兩個屬性：
一個是ng-model用于獲取選定的值；
另一個是ng-options用于確定下拉列表的元素數(shù)組。
<select ng-model="engineer.currentActivity" class="form-control" ng-options="act for act in activities"></select>
上面這條語句就是把選擇的值與engineer.currentActivity進行雙向數(shù)據(jù)綁定，然后列表中的選項是activities中的每一個值。數(shù)據(jù)如下：
$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" >
<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>
復雜對象，自定義列表名稱
有的時候下拉列表并不是單純的字符串數(shù)組，可能是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" }
];
這個時候，綁定的數(shù)據(jù)就必須是與這里面的格式相同的數(shù)據(jù)，比如直接復制其中一條：
$scope.engineer = {
name: "Dani" ,
currentActivity: {
id: 3,
type: "Work" ,
name: "Fixing bugs"
}
};
當然也可以直接指定成：
$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 >
運行效果如：
全部的代碼如下：
<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>
實現(xiàn)下拉列表的分組
其實分組與前面的例子很像，只要把空間中的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" >
<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" >
<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實現(xiàn)下拉列表的實例代碼，希望對大家有所幫助。
您可能感興趣的文章:
- JS中Select下拉列表類(支持輸入模糊查詢)功能
- JS設置下拉列表框當前所選值的方法
- js實現(xiàn)下拉列表選中某個值的方法(3種方法)
- jquery用ajax方式從后臺獲取json數(shù)據(jù)后如何將內(nèi)容填充到下拉列表
- JS實現(xiàn)支持多選的遍歷下拉列表代碼
- 使用JS模擬錨點跳轉的實例
- js實現(xiàn)微信/QQ直接跳轉到支付寶APP打開口令領紅包功能
- JSP頁面跳轉方法大全
- ajax跳轉到新的jsp頁面的方法
- JS動態(tài)添加的div點擊跳轉到另一頁面實現(xiàn)代碼
- JS實現(xiàn)點擊下拉列表文本框中出現(xiàn)對應的網(wǎng)址,點擊跳轉按鈕實現(xiàn)跳轉
相關文章
本文主要介紹AngularJs concepts，這里整理了詳細資料及簡單示例代碼來講解相關知識，有學習這部分知識的朋友可以參考下2016-09-09
使用typescript開發(fā)angular模塊并發(fā)布npm包
本篇文章主要介紹了使用typescript開發(fā)angular模塊并發(fā)布npm包，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-04-04
我們知道在應用的頁面或者組件需要加載數(shù)據(jù)時，瀏覽器和angular渲染頁面都需要消耗一定的時間。這篇文章主要介紹了AngularJS 防止頁面閃爍的方法,需要的朋友可以參考下2017-03-03
如何在Angular應用中創(chuàng)建包含組件方法示例
這篇文章主要給大家介紹了關于如何在Angular應用中創(chuàng)建包含組件的相關資料，文中通過示例代碼介紹的非常詳細，對大家學習或者使用Angular具有一定的參考學習價值，需要的朋友們下面來一起學習學習吧2019-03-03
Angular HMR(熱模塊替換)功能實現(xiàn)方法
本篇文章主要介紹了Angular HMR(熱模塊替換)功能實現(xiàn)方法，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-04-04
基于datepicker定義自己的angular時間組件的示例
這篇文章主要介紹了基于datepicker定義自己的angular時間組件,小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-03-03
本篇文章主要介紹了AngulerJS學習之按需動態(tài)加載文件，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-02-02
在AngularJS中，控制器是一個Javascript函數(shù)（類型/類），用來增強除了根作用域意外的作用域實例的。當你或者AngularJS本身通過<code>scope.$new</code>倆創(chuàng)建一個新的子作用域對象時，有一個選項能讓你將它當做參數(shù)傳遞給控制器。2015-05-05
AngularJS使用ngOption實現(xiàn)下拉列表的實例代碼
這篇文章主要介紹了AngularJS使用ngOption實現(xiàn)下拉列表的實例代碼的相關資料,需要的朋友可以參考下2016-01-01
本文主要介紹了RequireJs的使用。具有很好的參考價值，下面跟著小編一起來看下吧2017-02-02