欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

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>選擇一輛車:</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)容感興趣的讀者可查看本站專題：《AngularJS指令操作技巧總結(jié)》、《AngularJS入門(mén)與進(jìn)階教程》及《AngularJS MVC架構(gòu)總結(jié)》

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

相關(guān)文章

最新評(píng)論