多くの人々（私も含めて）を悩ませていると思われるのがこれです。
ng-optionsAngularJS のディレクティブを使用してタグのオプションを入力するときに<select>、オプションの値を設定する方法がわかりません。これに関するドキュメントは、少なくとも私のような単純な人間にとっては、非常にわかりにくいです。
オプションのテキストは次のように簡単に設定できます。
ng-options="select p.text for p in resultOptions"
resultOptionsたとえば、次の場合です。
[
{
"value": 1,
"text": "1st"
},
{
"value": 2,
"text": "2nd"
}
]
オプション値を設定するのが最も簡単なはずです (そしておそらくそうでしょう) が、今のところ、私には理解できません。
ベストアンサー1
見るngオプション
ngOptions(オプション) – {
comprehension_expression=} – 次のいずれかの形式:配列データソースの場合:
label for value in arrayselect as label for value in arraylabel group by group for value in arrayselect as label group by group for value in array track by trackexprオブジェクトデータソースの場合:label for (key , value) in objectselect as label for (key , value) in objectlabel group by group for (key, value) in objectselect 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の属性の実際の値を設定できるようになりました。selecttrack 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)ペアで分解されることを覚えておいてください。