[解決済み] AngularJSのng-optionsでvalueプロパティを設定するには？

質問

多くの人が（私も含めて）悩んでいるようなことを紹介します。

を使用する場合 ng-options ディレクティブのオプションを埋めるために、AngularJS で <select> タグで、オプションの値を設定する方法がわかりません。これに関するドキュメントは、少なくとも私のような単純労働者にとっては、実に不明瞭です。

このように簡単にオプションのテキストを設定することができるんだ。

ng-options="select p.text for p in resultOptions"

いつ resultOptions は例えば

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

オプションの値を設定するのは最もシンプルなことであるはず（そしておそらくそうである）ですが、今のところ私はそれを理解できていません。

どのように解決するのですか？

参照 ngOptions

ngOptions(オプション) - { comprehension_expression= } - いずれかの方法で のような形になります。

配列データソースの場合 : label for value in array select as label for value in array label group by group for value in array select as label group by group for value in array track by trackexpr オブジェクトデータソースの場合。 label for (key , value) in object select as label for (key , value) in object label group by group for (key, value) in object select as label group by group for (key, value) in object

あなたの場合、次のようになります。

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

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

更新情報

AngularJSのアップデートにより、実際の値を value 属性の select 要素に track by の式で表されます。

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

この醜いものを覚える方法

この構文形式を覚えるのに苦労している人たちへ。私は、この構文が最も簡単で美しい構文ではないことに同意します。この構文はPythonのリスト内包の拡張版のようなもので、これを知っていると構文をとても簡単に覚えられるんだ。このようなものです。

Pythonのコードです。

my_list = [x**2 for x in [1, 2, 3, 4, 5]]
> [1, 4, 9, 16, 25]

# Let people to be a list of person instances
my_list2 = [person.name for person in people]
> my_list2 = ['Alice', 'Bob']

これは実は、上に挙げた最初のものと同じ構文なのです。しかし <select> 通常、コード内の実際の値と、表示されるテキスト（ラベル）を区別する必要があり、そのために <select> 要素を使用します。

と同じように、私たちは person.id を表示させたくないのですが、コード内の id を表示し、その名前を表示します。同様に、私たちは person.name をコードで表示します。そこで登場するのが as キーワードでラベル付けをします。だから、こんな風になる。

person.id as person.name for person in people

または、代わりに person.id が必要です。 person インスタンス/リファレンスそのものです。以下を参照してください。

person as person.name for person in people

JavaScriptのオブジェクトの場合も、同じ方法が適用されます。ただ、オブジェクトの中の項目は、分解して (key, value) のペアを作成します。