AngularJS の ng-options で Value 属性を設定するにはどうすればよいですか?

AngularJS の ng-options での Value 属性の設定

AngularJS 開発者が直面する一般的な課題の 1 つは、ng を利用するときに value プロパティを設定することです。 -options ディレクティブを使用して、選択タグを設定します。ドキュメントがあいまいに見えるかもしれませんが、解決策は内包表記にあります。

ngOptions 構文

AngularJS ドキュメントで示されているように、ngOptions は内包表記を受け入れます。次の形式:

• 配列データ ソース:

  • 配列内の値のラベル
  • 値のラベルとして選択配列内
  • 配列内の値のグループごとのラベル
  • 配列の値のグループごとのラベルとして選択 trackexpr によってトラック

• オブジェクト データ ソース:

  • オブジェクトの (key , value) のラベル
  • オブジェクトの (key , value) のラベルとして選択
  • オブジェクト内の (キー、値) のグループごとのラベル
  • オブジェクト内の (キー、値) のグループごとのラベルとして選択

配列データ ソースの値の設定

あなたの場合、「value」プロパティと「text」プロパティを持つオブジェクトの配列がある場合、value 属性を設定するための適切な内包表現は次のとおりです。

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

「track by」式の使用

AngularJS の最近の更新では、「track by」式を使用して選択の値を明示的に設定できます。要素の value 属性:

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

Memory Aid

この複雑な構文を覚えやすくするために、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 中国語 Web サイトの他の関連記事を参照してください。