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

在AngularJS 的ng-options 中設定Value 屬性

AngularJS 開發人員面臨的一個常見挑戰是在使用屬性-options 指令填入選擇標籤。雖然文件看起來不明確，但解決方案在於理解表達式。

ngOptions 文法

如 AngularJS 文件中所示，ngOptions接受以下之一的理解表達式：以下格式：

• 陣列資料來源：

  • 陣列中值的標籤
  • 選擇作為值的標籤在數組中
  • 為數組中的值按組進行標籤
  • 透過trackexpr為數組中的值按組選擇標籤組

• 物件資料來源：

  • 物件中（鍵，值）的標籤
  • 選擇物件中（鍵，值）的標籤
  • 為物件中的（鍵，值）分組分組
  • 為物件中的（鍵，值）分組分組選擇標籤

設定數組資料來源的值

在您的情況下，如果您有一個具有「value」和「text」屬性的物件數組，則用於設定value 屬性的適當理解表達式是：

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

使用「track by」表達式

在AngularJS 的最新更新中，「track by」表達式可用於明確設定select 的值元素的value 屬性：

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

記憶輔助

為了簡化記住這個複雜的語法，可以將其視為Python列表推導式的擴展。因此，它遵循以下格式：

label as value for item in collection track by trackexpr

例如，以下表達式是等效的：

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

person.name for person in people

obj.value as obj.text for obj in array

person as person.name for person in people

附加註解

• as 關鍵字也可以用來設定label 屬性。
• 同時設定 label 和 value 屬性，可以為顯示和表單提交指定不同的值。

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