快捷導航

AngularJS中下拉框的高級用法示例

更新時間：2017年10月11日 10:02:14 作者：Zerone1993

這篇文章主要介紹了AngularJS中下拉框的高級用法,結(jié)合實例形式分析了AngularJS下拉框的遍歷、選擇、綁定、顯示等功能實現(xiàn)方法,需要的朋友可以參考下

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

HTML正文：

<body ng-app="myApp">
<!-- 對象內(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>選擇一輛車:</p>
<!-- 這里y標識成員元素對象，并且使用該對象的brand屬性作為顯示文本,select的值與y綁定 -->
<select ng-model="selectedCar" ng-options="y.brand for (x, y) in cars"></select>
<p>你選擇的是: {{selectedCar.brand}}</p>
<p>型號為: {{selectedCar.model}}</p>
<p>顏色為: {{selectedCar.color}}</p>
<p>下拉列表中的選項也可以是對象的屬性。</p>
</div>

Javascript操作代碼：

var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
  //復雜對象
  $scope.cars = {
  car01 : {brand : "Ford", model : "Mustang", color : "red"},
  car02 : {brand : "Fiat", model : "500", color : "white"},
  car03 : {brand : "Volvo", model : "XC90", color : "black"} }
  //簡單對象
  $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)容感興趣的讀者可查看本站專題：《AngularJS指令操作技巧總結(jié)》、《AngularJS入門與進階教程》及《AngularJS MVC架構(gòu)總結(jié)》

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

您可能感興趣的文章:

相關(guān)文章

AngularJS 防止頁面閃爍的方法
我們知道在應(yīng)用的頁面或者組件需要加載數(shù)據(jù)時，瀏覽器和angular渲染頁面都需要消耗一定的時間。這篇文章主要介紹了AngularJS 防止頁面閃爍的方法,需要的朋友可以參考下
2017-03-03
Angular中$compile源碼分析
本文給大家分享的是通過angular中的$compile源碼進行分析，從而更好的理解angular的使用，非常的不錯，希望大家能夠喜歡。
2016-01-01
AngularJS封裝$http.post()實例詳解
這篇文章主要介紹了 AngularJS封裝$http.post()實例詳解的相關(guān)資料,需要的朋友可以參考下
2017-05-05
Angular4學習筆記之準備和環(huán)境搭建項目
這篇文章主要介紹了Angular4學習筆記之準備和環(huán)境搭建項目，具有一定的參考價值，感興趣的小伙伴們可以參考一下
2017-08-08
Angular @HostBinding()和@HostListener()用法
本篇文章主要介紹了Angular @HostBinding()和@HostListener()用法，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
2018-03-03
這篇文章主要介紹了使用AngularJS實現(xiàn)表單向?qū)У姆椒?AngularJS是一款高人氣JavaScript庫,需要的朋友可以參考下
2015-06-06