快捷導(dǎo)航

AngularJS中下拉框的基本用法示例

更新時(shí)間：2017年10月11日 09:31:50 作者：Zerone1993

這篇文章主要介紹了AngularJS中下拉框的基本用法,結(jié)合具體實(shí)例形式分析了AngularJS下拉框的元素綁定、選中及顯示等功能實(shí)現(xiàn)方法,需要的朋友可以參考下

本文實(shí)例講述了AngularJS中下拉框的基本用法。分享給大家供大家參考，具體如下：

HTML正文：

<div ng-app="myApp" ng-controller="myCtrl">
<select ng-model="selectedName" ng-options="x for x in names"></select>
等價(jià)于：
<select>
<option ng-repeat="item in names">{{item}}</option>
</select>
<hr>
<!-- ng-repeat綁定的值為一個(gè)字符串，ng-options綁定的為一個(gè)對(duì)象 -->
<select ng-model="selectedSIte">
<option ng-repeat="item in sites" value="{{item.url}}">{{item.site}}</option>
</select>
<span>你選中的選址：{{selectedSIte}}</span>
<br><br>
<select ng-model="selectedSite" ng-options="x.site for x in sites"></select>
<span>你選中的選址：{{selectedSite}}</span>
<hr>
<!-- 因?yàn)閷?duì)象數(shù)組沒有key，angular默認(rèn)使用數(shù)組的下標(biāo)值作為key顯示 -->
<select ng-model="AAAA" ng-options="x for (x, y) in sites"></select>
<span>你選擇的值是: {{AAAA}}</span>
</div>

Javascript操作代碼：

var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
$scope.names = ["Google", "Baidu", "Taobao"];
$scope.sites = [{
 site : "Google", url : "http://www.google.com"},
{site : "Baidu", url : "http://www.baidu.com"},
{site : "Taobao", url : "http://www.taobao.com"} ];
});

效果：

更多關(guān)于AngularJS相關(guān)內(nèi)容感興趣的讀者可查看本站專題：《AngularJS指令操作技巧總結(jié)》、《AngularJS入門與進(jìn)階教程》及《AngularJS MVC架構(gòu)總結(jié)》

希望本文所述對(duì)大家AngularJS程序設(shè)計(jì)有所幫助。

您可能感興趣的文章:

相關(guān)文章

Angular.JS中的this指向詳解
這篇文章主要給大家介紹了關(guān)于Angular.JS中this指向的相關(guān)資料，文中介紹的非常詳細(xì)，對(duì)大家具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面來(lái)一起看看吧。
2017-05-05
angularJS實(shí)現(xiàn)表格部分列展開縮起示例代碼
這篇文章主要介紹了angularJS實(shí)現(xiàn)表格部分列展開縮起示例代碼,代碼簡(jiǎn)單易懂，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下
2021-09-09
Angular.js 實(shí)現(xiàn)數(shù)字轉(zhuǎn)換漢字實(shí)例代碼
這篇文章主要介紹了Angular.js 實(shí)現(xiàn)數(shù)字轉(zhuǎn)換漢字實(shí)例代碼的相關(guān)資料,非常不錯(cuò)，具有參考借鑒價(jià)值，需要的朋友可以參考下
2016-07-07
Angularjs制作簡(jiǎn)單的路由功能demo
這篇文章主要介紹了Angularjs制作簡(jiǎn)單的路由功能demo，剛剛開始學(xué)習(xí)Angularjs,做的不好，還請(qǐng)見諒。
2015-04-04
Angular.JS中select下拉框設(shè)置value的方法
select 是 AngularJS 預(yù)設(shè)的一組directive。下面這篇文章主要給大家介紹了關(guān)于Angular.JS中select下拉框設(shè)置value的方法，文中介紹的非常詳細(xì)，對(duì)大家具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面來(lái)一起看看吧。
2017-06-06
Angular2平滑升級(jí)到Angular4的步驟詳解
最近Angular項(xiàng)目組終于發(fā)布了新版——正式版 Angular 4.0.0。所以想著就來(lái)嘗試下升級(jí)，記錄下整個(gè)升級(jí)過程分享給大家，所以這篇文章主要介紹了Angular2升級(jí)到Angular4的詳細(xì)步驟，需要的朋友可以參考下。
2017-03-03
Angular實(shí)現(xiàn)svg和png圖片下載實(shí)現(xiàn)
這篇文章主要介紹了Angular實(shí)現(xiàn)svg和png圖片下載實(shí)現(xiàn)，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧
2019-05-05
AngularJs bootstrap詳解及示例代碼
本文主要講解AngularJs bootstrap，這里整理了詳細(xì)的資料及簡(jiǎn)單示例代碼幫助大家學(xué)習(xí)或者參考，有需要的小伙伴看下
2016-09-09
AngularJS中使用three.js的實(shí)例詳解
這篇文章主要介紹了AngularJS中使用three.js的實(shí)例詳解，我將之前自己做的demo放到了angularJS的一個(gè)component中，其實(shí)一開始是沒有準(zhǔn)備用框架的但是后面發(fā)現(xiàn)需要進(jìn)行的雙向綁定越來(lái)越多，后期表單數(shù)據(jù)的變化量也很大，最后還是選擇用NG來(lái)做這些事情
2017-07-07
AngularJS實(shí)現(xiàn)根據(jù)變量改變動(dòng)態(tài)加載模板的方法
這篇文章主要介紹了AngularJS實(shí)現(xiàn)根據(jù)變量改變動(dòng)態(tài)加載模板的方法,結(jié)合實(shí)例形式簡(jiǎn)單分析了AngularJS動(dòng)態(tài)加載模板的主要操作技巧與模板實(shí)現(xiàn)代碼,需要的朋友可以參考下
2016-11-11