在開發中下拉框往往會做成組件化。angular可以靈活的給下拉框賦值或選取值、選取對象。
方式一：直接在option上循環
給定數據如下：數據是一個數組。
$scope.cars = [
{brand:"BMW",name:"寶馬"},
{brand:"Benz",name:"奔馳"},
{brand:"Audi",name:"奧迪"}
];
<select ng-model="selectedCar">
<option ng-repeat="car in cars" value="{{car.brand}}">{{car.name}}</option>
</select>
<p>Selected Car: {{selectedCar}}</p>
運行結果比較簡單。
<select ng-model="selectedCar" class="ng-pristine ng-valid ng-empty ng-touched">
<option value="? undefined:undefined ?"></option>
<!-- ngRepeat: car in cars -->
<option ng-repeat="car in cars" value="BMW" class="ng-binding ng-scope">寶馬</option>
<!-- end ngRepeat: car in cars -->
<option ng-repeat="car in cars" value="Benz" class="ng-binding ng-scope">奔馳</option>
<!-- end ngRepeat: car in cars -->
<option ng-repeat="car in cars" value="Audi" class="ng-binding ng-scope">奧迪</option>
<!-- end ngRepeat: car in cars -->
</select>首先封裝數據如下：
$scope.cars = [
{brand:"BMW",name:"寶馬",color:"Red"},
{brand:"Benz",name:"奔馳",color:"Green"},
{brand:"Audi",name:"奧迪",color:"Blue"}
];
通過在select標籤中加入ng-option語法實現。ng-options="car.brand for car in cars">。car.brand作爲value值標籤如下：
<select ng-model="selectedCar" ng-options="car.brand for car in cars"></select>
<p>Selected: {{selectedCar.color}} {{selectedCar.name}}</p>
生成的html代碼：
方式三：x from (x, y) in 語法。
選擇的值將會是一個對象。數據如下：
$scope.cars = {
BMW: {name:"寶馬",color:"紅色"},
Benz: {name:"奔馳",color:"藍色"},
Audi: {name:"奧迪",color:"綠色"}
};
key是BMW\Benz\Audi. value是對應的對象。
<select ng-model="selectedCar" ng-options="x for (x, y) in cars"></select>
<p>Selected: {{selectedCar.color}} {{selectedCar.name}}</p>
完整代碼如下：
<!DOCTYPE html>
<html ng-app="myApp">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
<title>Select - AngularJS Test</title>
<style type="text/css">
.test-div {margin:15px;padding:15px;border:1px solid #ccc;}
</style>
</head>
<body>
<div class="test-div" ng-controller="myCtrl1">
<select ng-model="selectedCar">
<option ng-repeat="car in cars" value="{{car.brand}}">{{car.name}}</option>
</select>
<p>Selected Car: {{selectedCar}}</p>
</div>
<div class="test-div" ng-controller="myCtrl2">
<select ng-model="selectedColor" ng-options="color for color in colors"></select>
<p>Selected Color: {{selectedColor}}</p>
</div>
<div class="test-div" ng-controller="myCtrl3">
<select ng-model="selectedCar" ng-options="car.brand for car in cars"></select>
<p>Selected: {{selectedCar.color}} {{selectedCar.name}}</p>
</div>
<div class="test-div" ng-controller="myCtrl4">
<select ng-model="selectedCar" ng-options="x for (x, y) in cars"></select>
<p>Selected: {{selectedCar.color}} {{selectedCar.name}}</p>
</div>
<script type="text/javascript" src="static/js/angular-1.5.8.js"></script>
<script type="text/javascript">
var myApp = angular.module("myApp", []);
myApp.controller("myCtrl1", function($scope) {
$scope.cars = [
{brand:"BMW",name:"寶馬"},
{brand:"Benz",name:"奔馳"},
{brand:"Audi",name:"奧迪"}
];
});
myApp.controller("myCtrl2", function($scope) {
$scope.colors = ["Red", "Green", "Blue"];
});
myApp.controller("myCtrl3", function($scope) {
$scope.cars = [
{brand:"BMW",name:"寶馬",color:"Red"},
{brand:"Benz",name:"奔馳",color:"Green"},
{brand:"Audi",name:"奧迪",color:"Blue"}
];
});
myApp.controller("myCtrl4", function($scope) {
$scope.cars = {
BMW: {name:"寶馬",color:"紅色"},
Benz: {name:"奔馳",color:"藍色"},
Audi: {name:"奧迪",color:"綠色"}
};
});
</script>
</body>
</html>