AngularJS中下拉框的基本用法示例
本文實(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ù)組沒(méi)有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)容感興趣的讀者可查看本站專(zhuān)題:《AngularJS指令操作技巧總結(jié)》、《AngularJS入門(mén)與進(jìn)階教程》及《AngularJS MVC架構(gòu)總結(jié)》
希望本文所述對(duì)大家AngularJS程序設(shè)計(jì)有所幫助。
- AngularJS動(dòng)態(tài)生成select下拉框的方法實(shí)例
- angularjs 動(dòng)態(tài)從后臺(tái)獲取下拉框的值方法
- angularJs-$http實(shí)現(xiàn)百度搜索時(shí)的動(dòng)態(tài)下拉框示例
- AngularJS中下拉框的高級(jí)用法示例
- Angularjs實(shí)現(xiàn)下拉框聯(lián)動(dòng)的示例代碼
- angularjs下拉框空白的解決辦法
- angularjs 實(shí)現(xiàn)帶查找篩選功能的select下拉框?qū)嵗?/a>
- Angularjs實(shí)現(xiàn)帶查找篩選功能的select下拉框示例代碼
- AngularJS使用ng-repeat指令實(shí)現(xiàn)下拉框
- AngularJS實(shí)現(xiàn)多級(jí)下拉框
相關(guān)文章
angularJS實(shí)現(xiàn)表格部分列展開(kāi)縮起示例代碼
這篇文章主要介紹了angularJS實(shí)現(xiàn)表格部分列展開(kāi)縮起示例代碼,代碼簡(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
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í)過(guò)程分享給大家,所以這篇文章主要介紹了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),文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2019-05-05
AngularJS中使用three.js的實(shí)例詳解
這篇文章主要介紹了AngularJS中使用three.js的實(shí)例詳解,我將之前自己做的demo放到了angularJS的一個(gè)component中,其實(shí)一開(kāi)始是沒(méi)有準(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

