angularjs: ng-select和ng-options

詩&遠方發表於2015-05-24
AngularJS
angular.js有一個很強大的指令: ng-select 它可以幫助你通過資料模型來建立select元素.它很好的支援了select標籤的語法,但是卻有點坑.
假設有如下一段json資料:
{
    "myOptions": [
        {
            "id": 106,
            "group": "Group 1",
            "label": "Item 1"
        },
        {
            "id": 107,
            "group": "Group 1",
            "label": "Item 2"
        },
        {
            "id": 110,
            "group": "Group 2",
            "label": "Item 3"
        },
}
$scope.myOptions = data.myOptions;

這段資料很簡單: 我有一些分組,每個分組都包含自己的一些選項.如果要直接用這些資料建立select元素是很麻煩的.所以,我把程式碼重構成下面這樣: angularjs會自動進行分組

<select
    ng-model="myOption"
    ng-options="value.id as value.label group by value.group for value in myOptions">
    <option>--</option>
</select>

ng-model的值會指向select元素的當前選中項的value值. ng-options指令會用於填充select下拉選項,它的值還需要深究一下: 我們從右邊往左邊看會比較容易,首先是: value in myOptions

它表示你要迭代當前作用域下的 myOptions 物件. 迭代時,myOptions物件裡的每一項的名字就叫value.

接下來是: group by value.group

它告訴angular.js去建立這個標籤:

<optgroup label="value.group">
...
</optgroup>

標籤的label屬性將會被value的group屬性值填充.

最後是: value.id as value.label

value.id將會和模型進行繫結,它的值會被存進ng-model屬性裡去(也就是option的value值,被選中後就是select標籤的value). 如果你沒有寫value.id as,而是隻寫了value.label,那麼,整個物件會被作為ng-model的值.

value.label就是option元素的選項名.這段程式碼渲染的結果如下:

<optgroup label="Group 1">
   <option value="0">Item 1</option>
   <option value="1">Item 2</option>
</optgroup>

請再仔細看一下,注意一下options的value屬性: 你可能認為它的值應該是資料模型中的id屬性值,但事實並非如此(雖然一開始我也這麼認為).事實上,它是一個遞增的數字,這個數字指向的是模型的索引值(這裡的模型就是myOptions陣列).不用擔心它-當使用者選擇某一項的時候,正確的id還是會被選中,並且傳遞到ng-model屬性中去.另外,如果你的ng-options表示式裡沒有value.id部分,那選中項對應的整個物件會成為ng-model的值.

你可以簡單的測試一下:

<select 
    ng-change="selectAction()"
    ng-model="myOption"
    ng-options="value.id as value.label group by value.group for value in myOptions">
    <option>--</option>
</select>

當使用者選中某一項的時候,ng-change 事件會被觸發,你可以把它列印出來:

$scope.selectAction = function() {
    console.log($scope.myOption);
};

最後提一下,一般select標籤都會有一個初始狀態,比如"--請選擇--"這樣.這一項是沒有value值的.可以直接在select元素里加上一個option標籤:

<option value="">-- 請選擇 --</option>

這樣是不影響資料模型的.如果使用者沒有選擇,或者選擇了這個 "--請選擇--" 項,那ng-model值就是空.很好理解.

 

ng-options的語法有點反人類.合理的語法設計或許應該是這樣的:

foreach value in myOptions use value.label as label use value.id as model group by value.group

 

這裡有一個JS fiddle的例子,很好的解釋了ng-select指令的用法: http://jsfiddle.net/jm6of9bu/2/

  

本文翻譯自:  ANGULAR.JS: NG-SELECT AND NG-OPTIONS 

 

我的demo: https://github.com/OOP-Code-Bunny/angular/tree/master/ng-select

 

(話外...看這篇文章之前,我還真不造還有optgroup這個標籤....)

 

 

相關文章