[AngularJS]AngularJS 入門教學 - ngOptions (一)

Select 下拉選單是在網頁中常用到的元素，它的每一選項都會有用來顯示用的 label 及所代表的 value 兩種屬性，也因為這樣的關係，所以 AngularJS 特別提供 ng-options 來產生這樣的內容。

它的作用跟 ng-repeat 很像，可以將陣列中的元素或是物件中的屬性一一取出並呈現在 View 中，只是 ng-options 是用來產生 Select 下拉選單的選項(Option)用的。

首先準備好一個 Controller 及 Model：

1
2
3

var SelectCtrl = function($scope) {
	$scope.onepiece = [ '蒙其·D·魯夫', '羅羅亞·索隆', '娜美', '騙人布', '香吉士', '多尼多尼·喬巴', '妮可·羅賓', '佛朗基', '布魯克' ];
};

onepiece 是一個很簡單的陣列而已，接下來筆者要將陣列中的元素一一輸出在下拉選單中。讓我們先來看我們的 View：

1
2
3
4
5
6
7
8
9

<div class="span5" style="margin-top:20px;" ng-controller="SelectCtrl">
	<div class="alert alert-info">
		<select ng-model="role">
			<option value="">--請選擇角色--</option>
		</select>
 
		<div ng-show="role!=''">選擇的是:{{ role }}</div>
	</div>
</div>

Select 下拉選單綁定到 role 上，然後 div 的顯示與否是依 role 的值是否為 null 來決定的。

好囉，接下來筆者會將 ng-options 的 4 種不同用法一一說明。

label for value in array

1
2
3

<select ng-model="role" ng-options="member for member in onepiece">
	<option value="">--請選擇角色--</option>
</select>

這邊看到的第 2 個 member 是指被取出的每一個 value，而第 1 個 member 就是指說要用來當做文字顯示的 label 是來自第 2 個 member。

來看看展開下拉選單後的樣式：

當選擇到某個項目時：

從這邊可以看到 role 的值預設就是陣列中的元素內容，如果想要指定選擇後的值時，可以再搭配一個 select。

select as label for value in array

1
2
3

<select ng-model="role" ng-options="i as member for (i, member) in onepiece">
	<option value="">--請選擇角色--</option>
</select>

這邊的第 1 個 i 就是當某一個選項被選擇(select)後所要對應的值。而 (i, member) in onepiece 的用法就是從 onepiece 中取出 (key, value)。而以陣列的每一個元素來說，key 就是索引，value 就是值囉。

展開下拉選單後的樣式：

所以現在當選擇到某選項後，role 就變成是索引值囉：

label 基本上是 Angular 表達式(Angular Expressions)，所以我們可以將 for 之前的 member 使用一些較為複雜的語法來組合出文字內容：

1
2
3

<select ng-model="role" ng-options="i as i + ':' + member for (i, member) in onepiece">
	<option value="">--請選擇角色--</option>
</select>

組合起來就是這樣囉：

label group by group for value in array

1
2
3

<select ng-model="role" ng-options="member group by i for (i, member) in onepiece">
	<option value="">--請選擇角色--</option>
</select>

這其實就是使用 group by 來指定要如何來將選項分組，分組的效果其實就是 optgroup 的語法而已。

展開下拉選單後的樣式：

當選擇到某個項目時：

select as label group by group for value in array

1
2
3

<select ng-model="role" ng-options="i as member group by i for (i, member) in onepiece">
	<option value="">--請選擇角色--</option>
</select>

最後一種就是既有分組，也有自定值，其實就是將前面的幾種方式都組合在一起而已。

展開下拉選單後的樣式：

當選擇到某個項目時：

這是針對一般的陣列元素來使用，若陣列中的元素是物件的話，則用法就會再多複雜一點點。這部份及作業就留到下一篇再說明了。