注意すべきことの1つは、ngModelがngOptionsを機能させるために必要であることです。ng-model="blah"
これは、「$ scope.blahを選択した値に設定する」と言っていることに注意してください。
これを試して:
<select ng-model="blah" ng-options="item.ID as item.Title for item in items"></select>
AngularJSのドキュメントの詳細を次に示します(まだ見ていなければ)。
配列データソースの場合:
- 配列の値のラベル
- 配列の値のラベルとして選択
- 配列内の値のグループごとにラベルを付ける=配列内の値のグループごとにラベルとして選択
オブジェクトデータソースの場合:
- オブジェクトの(key、value)のラベル
- オブジェクトの(key、value)のラベルとして選択
- オブジェクトの(キー、値)のグループごとにラベルを付ける
- オブジェクトの(キー、値)のグループごとにグループとしてラベルとして選択
AngularJSのオプションタグの値のいくつかの明確化のため:
を使用する場合ng-options
、ng-optionsによって書き出されたオプションタグの値は常に、オプションタグが関連する配列項目のインデックスになります。これは、AngularJSでは、プリミティブ型だけでなく、選択コントロールを使用してオブジェクト全体を実際に選択できるためです。例えば:
app.controller('MainCtrl', function($scope) {
$scope.items = [
{ id: 1, name: 'foo' },
{ id: 2, name: 'bar' },
{ id: 3, name: 'blah' }
];
});
<div ng-controller="MainCtrl">
<select ng-model="selectedItem" ng-options="item as item.name for item in items"></select>
<pre>{{selectedItem | json}}</pre>
</div>
上記では、オブジェクト全体を$scope.selectedItem
直接選択できます。ポイントは、AngularJSでは、オプションタグの内容を気にする必要がないことです。AngularJSで処理してください。スコープ内のモデルの内容のみを気にする必要があります。
上記の動作を示し、書き出されたHTMLを示すプランカーです
デフォルトオプションの扱い:
デフォルトのオプションに関して、私が上で言及し損ねたことがいくつかあります。
最初のオプションを選択し、空のオプションを削除します。
これを行うにng-init
は、モデルを(からng-model
)に設定するシンプルな要素を、繰り返しを行うアイテムの最初の要素に追加しますng-options
。
<select ng-init="foo = foo || items[0]" ng-model="foo" ng-options="item as item.name for item in items"></select>
注:foo
たまたま「偽物」に正しく初期化された場合、これは少し気が狂う可能性があります。その場合foo
、ほとんどの場合、コントローラーでの初期化を処理する必要があります。
デフォルトオプションのカスタマイズ:
これは少し異なります。ここで必要なのは、selectの子としてoptionタグを追加し、値の属性を空にして、その内部テキストをカスタマイズすることだけです。
<select ng-model="foo" ng-options="item as item.name for item in items">
<option value="">Nothing selected</option>
</select>
注:この場合、別のオプションを選択した後でも、「空」のオプションが残ります。これは、AngularJSでのselectのデフォルトの動作には当てはまりません。
選択後に非表示になるカスタマイズされたデフォルトオプション:
値を選択した後で、カスタマイズされたデフォルトオプションを削除したい場合は、ng-hide属性をデフォルトオプションに追加できます。
<select ng-model="foo" ng-options="item as item.name for item in items">
<option value="" ng-if="foo">Select something to remove me.</option>
</select>