AngularJS中下拉框的高級(jí)用法示例
更新時(shí)間：2017年10月11日 10:02:14 作者：Zerone1993
這篇文章主要介紹了AngularJS中下拉框的高級(jí)用法,結(jié)合實(shí)例形式分析了AngularJS下拉框的遍歷、選擇、綁定、顯示等功能實(shí)現(xiàn)方法,需要的朋友可以參考下
本文實(shí)例講述了AngularJS中下拉框的高級(jí)用法。分享給大家供大家參考，具體如下：
HTML正文：
<body ng-app="myApp">
<!-- 對(duì)象內(nèi)部屬性遍歷：x--key y---value -->
<div ng-controller="myctr01">
{{sites}}<br>
<select ng-model="site" ng-options="x for (x, y) in sites"></select>
選擇的網(wǎng)址：<span>{{site}}</span>
</div>
<div ng-controller="myCtrl">
<p>選擇一輛車(chē):</p>
<!-- 這里y標(biāo)識(shí)成員元素對(duì)象，并且使用該對(duì)象的brand屬性作為顯示文本,select的值與y綁定 -->
<select ng-model="selectedCar" ng-options="y.brand for (x, y) in cars"></select>
<p>你選擇的是: {{selectedCar.brand}}</p>
<p>型號(hào)為: {{selectedCar.model}}</p>
<p>顏色為: {{selectedCar.color}}</p>
<p>下拉列表中的選項(xiàng)也可以是對(duì)象的屬性。</p>
</div>
Javascript操作代碼：
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
//復(fù)雜對(duì)象
$scope.cars = {
car01 : {brand : "Ford", model : "Mustang", color : "red"},
car02 : {brand : "Fiat", model : "500", color : "white"},
car03 : {brand : "Volvo", model : "XC90", color : "black"} }
//簡(jiǎn)單對(duì)象
$scope.sites = {
site01 : "Google",
site02 : "Baidu",
site03 : "Taobao"
};
});
app.controller("myctr01",function($scope){
$scope.sites = {
site01 : "Google",
site02 : "Baidu",
site03 : "Taobao"
};
});
效果：
更多關(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中下拉框的基本用法示例
- 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)文章
我們知道在應(yīng)用的頁(yè)面或者組件需要加載數(shù)據(jù)時(shí)，瀏覽器和angular渲染頁(yè)面都需要消耗一定的時(shí)間。這篇文章主要介紹了AngularJS 防止頁(yè)面閃爍的方法,需要的朋友可以參考下2017-03-03
本文給大家分享的是通過(guò)angular中的$compile源碼進(jìn)行分析，從而更好的理解angular的使用，非常的不錯(cuò)，希望大家能夠喜歡。2016-01-01
AngularJS封裝$http.post()實(shí)例詳解
這篇文章主要介紹了 AngularJS封裝$http.post()實(shí)例詳解的相關(guān)資料,需要的朋友可以參考下2017-05-05
Angular4學(xué)習(xí)筆記之準(zhǔn)備和環(huán)境搭建項(xiàng)目
這篇文章主要介紹了Angular4學(xué)習(xí)筆記之準(zhǔn)備和環(huán)境搭建項(xiàng)目，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2017-08-08
Angular @HostBinding()和@HostListener()用法
本篇文章主要介紹了Angular @HostBinding()和@HostListener()用法，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2018-03-03
AngularJS基礎(chǔ) ng-mouseleave 指令詳解
本文主要介紹AngularJS ng-mouseleave 指令,這里幫大家整理了ng-mouseleave指令的詳細(xì)資料,并附有代碼示例,有需要的小伙伴可以參考下
2016-08-08 
@angular前端項(xiàng)目代碼優(yōu)化之構(gòu)建Api Tree的方法
這篇文章主要介紹了@angular前端項(xiàng)目代碼優(yōu)化之構(gòu)建Api Tree的方法，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧
2018-12-12 
使用AngularJS創(chuàng)建單頁(yè)應(yīng)用的編程指引
這篇文章主要介紹了使用AngularJS創(chuàng)建單頁(yè)應(yīng)用的編程指引,AngularJS是一款高人氣的JavaScript庫(kù),需要的朋友可以參考下
2015-06-06 
AngularJS的ng Http Request與response格式轉(zhuǎn)換方法
這篇文章主要介紹了AngularJS的ng Http Request與response格式轉(zhuǎn)換方法,結(jié)合實(shí)例形式分析了AngularJS實(shí)現(xiàn)Request與response格式轉(zhuǎn)換操作的相關(guān)設(shè)置與使用技巧,需要的朋友可以參考下
2016-11-11