在 AngularJS 的 ng-options 中設定值

AngularJS 的 ng-options 指令允許開發人員填入 標籤的選項。出現的一個常見問題是如何為每個選項設定 value 屬性。

為了理解值設定機制，讓我們深入研究 ngOptions 的語法。它採用以下形式之一的表達式：

對於數組：

label for value in array

對於物件：

label for (key, value) in object

考慮以下範例陣列:

array = [{ "value": 1, "text": "1st" }, { "value": 2, "text": "2nd" }];

要使用ng-options 填充選項，我們可以寫：

在這種情況下，obj.value 將決定每個選項的選定值。

更新：以值表達式追蹤

隨著最近的AngularJS 更新，現在可以使用Track by 表達式明確指定value 屬性的值：

記住文法

ngOptions語法可能很難記住。一個有用的類比是將其視為Python 列表推導式的擴展版本：

[x**2 for x in [1, 2, 3, 4, 5]]

但是，在ng-options 中，我們使用as 關鍵字來區分每個選項顯示的值和文字：

person.id as person.name for person in people

對於JavaScript 對象，語法類似，使用(key, value) 對：

for (key, value) in object