これが多くの人（私を含む）を悩ませているようです。
ng-optionsAngularJSでディレクティブを使用して<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 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)ペアで分解されることを覚えておいてください。
value 属性がその値を取得する方法:
したがって、あなたの場合は次のようになります。
obj = { '1': '1st', '2': '2nd' };
<select ng-options="k as v for (k,v) in obj"></select>
私もこの問題を抱えていました。ng-options で値を設定できませんでした。生成されたすべてのオプションは、0、1、...、n で設定されました。
正しくするために、ng-options で次のようなことを行いました。
<select ng-options="room.name for room in Rooms track by room.price">
<option value="">--Rooms--</option>
</select>
「追跡」を使用して、すべての値を で設定しますroom.price。
(この例は最悪です: 同じ価格が複数ある場合、コードは失敗します。したがって、必ず異なる値を指定してください。)
$scope.Rooms = [
{ name: 'SALA01', price: 100 },
{ name: 'SALA02', price: 200 },
{ name: 'SALA03', price: 300 }
];
ブログ投稿How to set the initial selected value of a select element using Angular.JS ng-options & track byから学びました。
ビデオを見る。素敵なクラスです:)
optionフォームが最終的にサーバーに送信されるために要素の値を変更したい場合は、これを行う代わりに、
<select name="text" ng-model="text" ng-options="select p.text for p in resultOptions"></select>
あなたはこれを行うことができます：
<select ng-model="text" ng-options="select p.text for p in resultOptions"></select>
<input type="hidden" name="text" value="{{ text }}" />
期待される値は、正しい名前でフォームを介して送信されます。
my_hero通常のフォーム送信を使用して、呼び出されたカスタム値をサーバーに送信するには:
JSON:
"heroes": [
{"id":"iron", "label":"Iron Man Rocks!"},
{"id":"super", "label":"Superman Rocks!"}
]
HTML:
<select ng-model="hero" ng-options="obj.id as obj.label for obj in heroes"></select>
<input type="hidden" name="my_hero" value="{{hero}}" />
サーバーはの値としてironまたはを受け取ります。supermy_hero
これは@neemzy による回答に似ていますが、属性に別のデータを指定していvalueます。
あなたはこれを行うことができます：
<select ng-model="model">
<option value="">Select</option>
<option ng-repeat="obj in array" value="{{obj.id}}">{{obj.name}}</option>
</select>
- アップデート
いくつかの更新の後、ユーザーfrm.adiputraのソリューションははるかに優れています。コード：
obj = { '1': '1st', '2': '2nd' };
<select ng-options="k as v for (k,v) in obj"></select>
値をテキストと同じにしたい場合は、新しい「追跡」機能を使用する代わりに、配列を使用してこれを行うことができます。
<select ng-options="v as v for (k,v) in Array/Obj"></select>
値をオブジェクト/配列のキーにする標準構文の違いに注意してください。したがって、配列の場合は 0、1、2 などです。
<select ng-options"k as v for (k,v) in Array/Obj"></select>
k as vはv as vになります。
構文を見て常識に基づいてこれを発見しました。(k,v) は、配列/オブジェクトをキーと値のペアに分割する実際のステートメントです。
'k as v' ステートメントでは、k が値になり、v がユーザーに表示されるテキスト オプションになります。「トラックバイ」は面倒でやり過ぎだと思います。
このディレクティブは、配列の要素にng-optionsvalue 属性を設定しません。<options>
使用limit.value as limit.text for limit in limits手段:
<option>のラベルをとして設定し、値を選択したものにlimit.text
保存しますlimit.valueng-model
Stack Overflow の質問AngularJS ng-options not render valuesを参照してください。
データ ソースの設定方法によっては、ng-options で項目を選択するのが少し難しい場合があります。
しばらくそれらと格闘した後、私が使用する最も一般的なデータ ソースを使用してサンプルを作成することになりました。ここで見つけることができます：
http://plnkr.co/edit/fGq2PM?p=preview
ng-options を機能させるために、考慮すべき点がいくつかあります。
key | label。多くのオンラインの例では、オブジェクトを「キー」として配置します。オブジェクトからの情報が必要な場合は、そのように設定し、そうでない場合は、必要な特定のプロパティをキーとして使用します。(ID、CODEなど。plckrのサンプルと同様)ドロップダウン/選択コントロールの値を設定する方法は、#3 によって異なります。
$scope.dropdownmodel = $scope.user.state;オブジェクトをキーとして設定する場合は、オプションをループする必要があります。オブジェクトを割り当てても、異なるハッシュキーを持つため、アイテムが選択されたように設定されません。たとえば、次のようになります。
for (var i = 0, len = $scope.options.length; i < len; i++) {
if ($scope.options[i].id == savedValue) { // Your own property here:
console.log('Found target! ');
$scope.value = $scope.options[i];
break;
}
}
他のオブジェクトの同じプロパティの savedValue を置き換えることができます$scope.myObject.myProperty。
オブジェクトの場合:
<select ng-model="mySelect" ng-options="key as value for (key, value) in object"></select>
チュートリアルANGULAR.JS: NG-SELECT AND NG-OPTIONSは、問題の解決に役立ちました。
<select id="countryId"
class="form-control"
data-ng-model="entity.countryId"
ng-options="value.dataValue as value.dataText group by value.group for value in countries"></select>
コード スニペットを実行して、バリエーションを確認します。ここに簡単な理解のためのメモがあります
例 1 (オブジェクトの選択):- ng-option="os.name for os in osList track by os.id". ここtrack by os.idは重要であり、そこにあるべきであり、前にあるべきではありos.id as ませんos.name。
ng-model="my_os"のオブジェクトに設定する必要があります。my_os={id: 2}例 2 (値の選択) :- ng-option="os.id as os.name for os in osList". ここtrack by os.id はそこにあるos.id as べきではなく、前にあるはずos.nameです。
ng-model="my_os"ような値に設定する必要がありますmy_os= 2残りのコード スニペットで説明します。
angular.module('app', []).controller('ctrl', function($scope, $timeout){
//************ EXAMPLE 1 *******************
$scope.osList =[
{ id: 1, name :'iOS'},
{ id: 2, name :'Android'},
{ id: 3, name :'Windows'}
]
$scope.my_os = {id: 2};
//************ EXAMPLE 2 *******************
$timeout(function(){
$scope.siteList = [
{ id: 1, name: 'Google'},
{ id: 2, name: 'Yahoo'},
{ id: 3, name: 'Bing'}
];
}, 1000);
$scope.my_site = 2;
$timeout(function(){
$scope.my_site = 3;
}, 2000);
})fieldset{
margin-bottom: 40px;
}
strong{
color:red;
}<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.10/angular.min.js"></script>
<div ng-app="app" ng-controller="ctrl">
<!--//************ EXAMPLE 1 *******************-->
<fieldset>
<legend>Example 1 (Set selection as <strong>object</strong>)</legend>
<select ng-model="my_os" ng-options="os.name for os in osList track by os.id">
<option value="">--Select--</option>
</select>
{{my_os}}
</fieldset>
<!--//************ EXAMPLE 2 *******************-->
<fieldset>
<legend>Example 2 (Set selection as <strong>value</strong>. Simulate ajax)</legend>
<select ng-model="my_site" ng-options="site.id as site.name for site in siteList">
<option value="">--Select--</option>
</select>
{{my_site}}
</fieldset>
</div>前に多くの人が言ったように、次のようなデータがある場合:
countries : [
{
"key": 1,
"name": "UAE"
},
{
"key": 2,
"name": "India"
},
{
"key": 3,
"name": "OMAN"
}
]
私はそれを次のように使用します：
<select
ng-model="selectedCountry"
ng-options="obj.name for obj in countries">
</select>
コントローラーで、最初の空の項目を取り除くために初期値を設定する必要があります。
$scope.selectedCountry = $scope.countries[0];
// You need to watch changes to get selected value
$scope.$watchCollection(function() {
return $scope.selectedCountry
}, function(newVal, oldVal) {
if (newVal === oldVal) {
console.log("nothing has changed " + $scope.selectedCountry)
}
else {
console.log('new value ' + $scope.selectedCountry)
}
}, true)
$scope.items = [{name: 'a', age: 20},{ name: 'b', age: 30},{ name: 'c', age: 40}];
Case-1) 配列内の値のラベル:
<div>
<p>selected item is : {{selectedItem}}</p>
<p> age of selected item is : {{selectedItem.age}} </p>
<select ng-model="selectedItem" ng-options="item.name for item in items">
</select>
</div>
出力の説明 (最初の項目が選択されていると仮定):
selectedItem = {name: 'a', age: 20} // [デフォルトでは、選択されたアイテムは値itemと等しい]
selectedItem.age = 20
ケース 2) 配列の値のラベルとして選択:
<div>
<p>selected item is : {{selectedItem}}</p>
<select ng-model="selectedItem" ng-options="item.age as item.name for item in items">
</select>
</div>
出力の説明 (最初のアイテムが選択されたと仮定): selectedItem = 20 // [選択部分はitem.age ]