angularjs入門-ng-options
這個主要是針對下拉式清單的部份，操作起來也算是比較複雜難記的，其實寫下來除了可以讓入門的人參考，也是可以方便自己來查看，我先來設計一個台灣六都的陣列，然後呈現在下拉式選單裡面，在下拉選單裡面則呈現選擇了哪個值，範例如下
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
</head>
<body ng-app="App">
<div ng-controller="FirstCtrl">
<select ng-model="selectValue" class="form-control" ng-options="city for city in taiwan">
<option value="">請選擇</option>
</select>
{{selectValue}}
</div>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.min.js"></script>
<script>
angular.module('App', [])
.controller('FirstCtrl', function ($scope) {
$scope.taiwan = ['台北','桃園','新竹','台中','台南','高雄'];
});
</script>
</body>
</html>
針對這個語法特別解釋一下，ng-options就是我們要呈現在畫面中的樣子，如果呈現都是在ng-options裡面去操作，taiwan就是陣列的名稱，for city的這個city則是取出的每一個值，第一個city則是要顯示的文字，如果我們今天想呈現的是陣列裡面的位置，我們可以把程式改成如下
<select ng-model="selectValue" class="form-control" ng-options="key as city for (key,city) in taiwan">
<option value="">請選擇</option>
</select>
{{selectValue}}
</div>key值是{{selectValue}}的值，as city則是下拉選單中要顯示的值，for(key,city)的部份，也就是說key是陣列的位置，city則是要顯示的六都名稱，如果我們想要顯示的也是陣列位置的值，可以改成如下
<select ng-model="selectValue" class="form-control" ng-options="key as key for (key,city) in taiwan">
<option value="">請選擇</option>
</select>
{{selectValue}}
</div>我有說過如果我們想格式化顯示的值，也是在ng-options裡面去實做，如下範例
<option value="">請選擇</option>
</select>在來我們把問題複雜化一點，假設我們後端來的是一個json的值，除了六都還有各都的區，在這邊我只是假設，所有都市只有東西南北區，下面是範例
<div ng-controller="FirstCtrl">
<select ng-model="selectValue" class="form-control" ng-options="city.city for city in taiwan">
<option value="">請選擇</option>
</select>
{{selectValue}}
</div>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.min.js"></script>
<script>
angular.module('App', [])
.controller('FirstCtrl', function ($scope) {
$scope.taiwan = [
{ city: '台北', area: '東區' },
{ city: '台北', area: '西區' },
{ city: '台北', area: '南區' },
{ city: '台北', area: '北區' },
{ city: '桃園', area: '東區' },
{ city: '桃園', area: '西區' },
{ city: '桃園', area: '南區' },
{ city: '桃園', area: '北區' },
{ city: '新竹', area: '東區' },
{ city: '新竹', area: '西區' },
{ city: '新竹', area: '南區' },
{ city: '新竹', area: '北區' },
{ city: '台中', area: '東區' },
{ city: '台中', area: '西區' },
{ city: '台中', area: '南區' },
{ city: '台中', area: '北區' },
{ city: '台南', area: '東區' },
{ city: '台南', area: '西區' },
{ city: '台南', area: '南區' },
{ city: '台南', area: '北區' },
{ city: '高雄', area: '東區' },
{ city: '高雄', area: '西區' },
{ city: '高雄', area: '南區' },
{ city: '高雄', area: '北區' }
];
});
</script>
</body>我們可以看到這是不合理的，因為我們應該只能顯示台北然後底下是各自的區域，這時候我們需要用到group來顯示，如下圖所示
<select ng-model="selectValue" class="form-control" ng-options="city.area group by city.city for city in taiwan">
<option value="">請選擇</option>
</select>
{{selectValue}}
</div>但是為何我們選擇了選項之後，顯示的卻是類似json的value，那是因為我們的ng-model取到的是你選擇到哪一列的值，如果我們想要顯示的是台北東區的話，那我們就得把expression改成如下
<select ng-model="selectValue" class="form-control" ng-options="city.area group by city.city for city in taiwan">
<option value="">請選擇</option>
</select>
{{selectValue.city}}{{selectValue.area}}
</div>
以上再請大家多多指教
