AngularJS中下拉框的基本用法示例
更新時間：2017年10月11日 09:31:50 作者：Zerone1993
這篇文章主要介紹了AngularJS中下拉框的基本用法,結(jié)合具體實例形式分析了AngularJS下拉框的元素綁定、選中及顯示等功能實現(xiàn)方法,需要的朋友可以參考下
本文實例講述了AngularJS中下拉框的基本用法。分享給大家供大家參考，具體如下：
HTML正文：
<div ng-app="myApp" ng-controller="myCtrl">
<select ng-model="selectedName" ng-options="x for x in names"></select>
等價于：
<select>
<option ng-repeat="item in names">{{item}}</option>
</select>
<hr>
<!-- ng-repeat綁定的值為一個字符串，ng-options綁定的為一個對象 -->
<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>
<!-- 因為對象數(shù)組沒有key，angular默認使用數(shù)組的下標值作為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入門與進階教程》及《AngularJS MVC架構(gòu)總結(jié)》
希望本文所述對大家AngularJS程序設(shè)計有所幫助。
您可能感興趣的文章:
- AngularJS動態(tài)生成select下拉框的方法實例
- angularjs 動態(tài)從后臺獲取下拉框的值方法
- angularJs-$http實現(xiàn)百度搜索時的動態(tài)下拉框示例
- AngularJS中下拉框的高級用法示例
- Angularjs實現(xiàn)下拉框聯(lián)動的示例代碼
- angularjs下拉框空白的解決辦法
- angularjs 實現(xiàn)帶查找篩選功能的select下拉框?qū)嵗?/a>
- Angularjs實現(xiàn)帶查找篩選功能的select下拉框示例代碼
- AngularJS使用ng-repeat指令實現(xiàn)下拉框
- AngularJS實現(xiàn)多級下拉框
相關(guān)文章
這篇文章主要介紹了angular 內(nèi)存溢出的問題解決，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-07-07
本篇文章主要介紹了Angular如何引入第三方庫的方法詳解，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-07-07
Angular外部使用js調(diào)用Angular控制器中的函數(shù)方法或變量用法示例
這篇文章主要介紹了Angular外部使用js調(diào)用Angular控制器中的函數(shù)方法或變量用法,結(jié)合實例形式分析了Angular基于外部JS調(diào)用控制器中方法與變量的具體實現(xiàn)步驟與相關(guān)技巧,需要的朋友可以參考下2016-08-08
微信小程序?qū)崿F(xiàn)左右聯(lián)動的實戰(zhàn)記錄
聯(lián)動菜單是大家在開發(fā)小程序經(jīng)常會遇到的一個功能，下面這篇文章主要給大家介紹了關(guān)于微信小程序?qū)崿F(xiàn)左右聯(lián)動的相關(guān)資料，文中通過示例代碼介紹的非常詳細，需要的朋友可以參考借鑒，下面隨著小編來一起學習學習吧2018-07-07
AngularJS實現(xiàn)單一頁面內(nèi)設(shè)置跳轉(zhuǎn)路由的方法
這篇文章主要介紹了AngularJS實現(xiàn)單一頁面內(nèi)設(shè)置跳轉(zhuǎn)路由的方法,結(jié)合實例形式分析了AngularJS路由操作相關(guān)設(shè)置與使用技巧,需要的朋友可以參考下2017-06-06
AngularJS中控制器函數(shù)的定義與使用方法示例
這篇文章主要介紹了AngularJS中控制器函數(shù)的定義與使用方法,結(jié)合具體實例形式分析了AngularJS控制器函數(shù)的定義、綁定及相關(guān)使用技巧,需要的朋友可以參考下2017-10-10
Angularjs全局變量被作用域監(jiān)聽的正確姿勢
這篇文章主要介紹了Angularjs全局變量被作用域監(jiān)聽的正確姿勢的相關(guān)資料,需要的朋友可以參考下2016-02-02
今天小編就為大家分享一篇angularJS1 url中攜帶參數(shù)的獲取方法，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-10-10
AngularJS之頁面跳轉(zhuǎn)Route實例代碼
本篇文章主要介紹了AngularJS之頁面跳轉(zhuǎn)Route ，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-03-03
AngularJS中$injector、$rootScope和$scope的概念和關(guān)聯(lián)關(guān)系深入分析
這篇文章主要介紹了AngularJS中$injector、$rootScope和$scope的概念和關(guān)聯(lián)關(guān)系,結(jié)合實例形式較為深入的分析了$injector、$rootScope和$scope的概念、功能、使用方法及相互之間的關(guān)系,需要的朋友可以參考下2017-01-01