angularjs: ng-select和ng-options

標籤：比較   logs   r.js   好的   並且   表示   遞增   簡單的   有一個   

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

 

angularjs: ng-select和ng-options