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

來源：懂視網責編：小采時間：2020-11-27 22:28:08

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

AngularJS中下拉框的高級用法示例:本文實例講述了AngularJS中下拉框的高級用法。分享給大家供大家參考，具體如下： HTML正文： <body ng-app=myApp>  <div ng-controller=myctr01>

推薦度：

點擊下載本文 文檔為doc格式

導讀AngularJS中下拉框的高級用法示例:本文實例講述了AngularJS中下拉框的高級用法。分享給大家供大家參考，具體如下： HTML正文： <body ng-app=myApp>  <div ng-controller=myctr01>

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

HTML正文：

<body ng-app="myApp">
<!-- 對象內部屬性遍歷：x--key y---value -->
<div ng-controller="myctr01">
{{sites}}<br>
<select ng-model="site" ng-options="x for (x, y) in sites"></select>
選擇的網址：<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"
 };
});

效果：