如何在 AngularJS 的 ng-options 中設定 value 屬性？

在 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 填充選項，我們可以編寫：

<select ng-options="obj.text as obj.value for obj in array"></select>

在這種情況下，obj.value 將確定所選的選項

更新：按值表達式追蹤

透過最近的AngularJS 更新，現在可以使用追蹤明確指定value屬性的值表達式：

<select ng-options="obj.text for obj in array track by obj.value"></select>

記住語法

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 對象，語法類似，使用（鍵，值）對：

for (key, value) in object

以上是如何在 AngularJS 的 ng-options 中設定 value 屬性？的詳細內容。更多資訊請關注PHP中文網其他相關文章！