AngularJS使用ng-options指令實(shí)現(xiàn)下拉框

更新時(shí)間：2016年08月23日 11:37:39 作者：翱翔天地

這篇文章主要介紹了AngularJS使用ng-options指令實(shí)現(xiàn)下拉框效果，ng-option指令使用也很簡(jiǎn)單，下文具體給大家說(shuō)明，對(duì)angularjs 下拉框知識(shí)感興趣的朋友一起看下吧

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

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

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

1、問(wèn)題背景

一般情況下，select下都會(huì)有option，但是AngularJS中有指令ng-options，就可以實(shí)現(xiàn)select下拉框

2、實(shí)現(xiàn)源碼

<!DOCTYPE html> 
<html> 
<head> 
<meta charset="UTF-8"> 
<title>AngularJS之下拉框（方式一）</title> 
<script type="text/javascript" src="../js/angular.min.js" ></script> 
<script> 
var app = angular.module("selApp",[]); 
app.controller("selCon",function($scope){ 
$scope.options = ["第一季度","第二季度","第三季度","第四季度"]; 
}); 
</script> 
</head> 
<body> 
<div ng-app="selApp" ng-controller="selCon"> 
<select ng-model="selectedName" ng-options="x for x in options" style="width: 180px;"> 
</select> 
</div> 
</body> 
</html>

3、問(wèn)題說(shuō)明

<select>
<option></option>
</select>

利用指令ng-options，可以省略<option></option>

以上所述是小編給大家介紹的AngularJS使用ng-options指令實(shí)現(xiàn)下拉框，希望對(duì)大家有所幫助，如果大家有任何疑問(wèn)請(qǐng)給我留言，小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)腳本之家網(wǎng)站的支持！

您可能感興趣的文章:

相關(guān)文章

angularjs創(chuàng)建彈出框?qū)崿F(xiàn)拖動(dòng)效果
這篇文章主要為大家詳細(xì)介紹了angularjs創(chuàng)建彈出框?qū)崿F(xiàn)拖動(dòng)效果的相關(guān)資料，angularjs modal模態(tài)框創(chuàng)建可拖動(dòng)的指令，感興趣的小伙伴們可以參考一下
2016-01-01
Angular中$broadcast和$emit的使用方法詳解
本篇文章主要介紹了Angular中$broadcast和$emit的使用方法詳解，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2017-05-05
Angularjs的$http異步刪除數(shù)據(jù)詳解及實(shí)例
這篇文章主要介紹了Angularjs的$http異步刪除數(shù)據(jù)詳解及實(shí)例的相關(guān)資料,這里提供實(shí)現(xiàn)思路及實(shí)現(xiàn)具體的方法，需要的朋友可以參考下
2017-07-07
Angular1.x自定義指令實(shí)例詳解
這篇文章主要介紹了Angular1.x自定義指令,結(jié)合實(shí)例形式分析了Angular1.x自定義指令的實(shí)現(xiàn)與使用方法,以及相關(guān)操作技巧與注意事項(xiàng),需要的朋友可以參考下
2017-03-03
AngularJs Javascript MVC 框架
這篇文章主要介紹了AngularJs Javascript MVC 框架的相關(guān)資料,非常不錯(cuò)，具有參考借鑒價(jià)值，需要的朋友可以參考下
2016-06-06
Angular實(shí)現(xiàn)下拉框模糊查詢功能示例
這篇文章主要介紹了Angular實(shí)現(xiàn)下拉框模糊查詢功能,涉及AngularJS事件響應(yīng)及字符串查詢等相關(guān)操作技巧,需要的朋友可以參考下
2018-01-01
Angular4實(shí)現(xiàn)圖片上傳預(yù)覽路徑不安全的問(wèn)題解決
這篇文章主要給大家介紹了關(guān)于Angular4實(shí)現(xiàn)圖片上傳預(yù)覽路徑不安全問(wèn)題的解決方法，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面來(lái)一起學(xué)習(xí)學(xué)習(xí)吧。
2017-12-12
Angular 2父子組件之間共享服務(wù)通信的實(shí)現(xiàn)
這篇文章主要給大家介紹了關(guān)于Angular 2父子組件之間共享服務(wù)通信的相關(guān)資料，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面來(lái)一起看看吧。
2017-07-07
理解AngularJs篇：30分鐘快速掌握AngularJs
這篇文章主要介紹了理解AngularJs篇：30分鐘快速掌握AngularJs，詳細(xì)介紹了AngularJs所涉及的知識(shí)點(diǎn)，有興趣的可以了解一下。
2016-12-12
angularJS 發(fā)起$http.post和$http.get請(qǐng)求的實(shí)現(xiàn)方法
本篇文章主要介紹了angularJS 發(fā)起$http.post和$http.get請(qǐng)求的實(shí)現(xiàn)方法，分別介紹了$http.post和$http.get請(qǐng)求的方法，有興趣的可以了解一下
2017-05-05