首頁 > web前端 > js教程 > 主體

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

Barbara Streisand
發布: 2024-11-07 00:32:02
原創
1050 人瀏覽過

How do I set the value attribute in ng-options for AngularJS?

在 AngularJS 的 ng-options 中設定值

AngularJS 的 ng-options 指令允許開發人員為

為了理解值設定機制,讓我們深入研究 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中文網其他相關文章!

來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
作者最新文章
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板