angular.js有一個很強大的指令: ng-select 它可以幫助你通過數據模型來創建select元素.它很好的支持了select標簽的語法,但是卻有點坑.

{
    "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

angularjs: ng-select和ng-options