[解決済み】AngularJSのng-optionsでselectを操作する。

質問

他の記事でも読んだのですが、分かりませんでした。

配列を持っています。

$scope.items = [
   {ID: '000001', Title: 'Chicago'},
   {ID: '000002', Title: 'New York'},
   {ID: '000003', Title: 'Washington'},
];

としてレンダリングしたい。

<select>
  <option value="000001">Chicago</option>
  <option value="000002">New York</option>
  <option value="000003">Washington</option>
</select>

また、ID=000002のオプションを選択したい。

私は、以下を読みました。 選択 とやってみたのですが、解りません。

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

一つ注意すべきは、ngModelが 必須 が動作するようにします。 ng-model="blah" これは "set $scope.blah to selected value" と言っているのです。

これを試してみてください。

<select ng-model="blah" ng-options="item.ID as item.Title for item in items"></select>

AngularJSのドキュメントからさらに引用します（まだご覧になっていない方はこちら）。

は、配列データソース用です。

• 配列中の値のラベル
• 配列中の値のラベルとして選択する
• label group by group for value in array = select as label group by group for value in array.

オブジェクト・データ・ソースの場合。

• オブジェクトの (キー , 値) に対応するラベル
• オブジェクトの (キー , 値) のラベルとして選択します。
• ラベル group by group for (key, value) in object
• ラベルとして選択する グループによるグループ for (キー, 値) in オブジェクト

AngularJSのoptionタグの値についての説明です。

を使用する場合 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ではoptionタグの中身を気にする必要がないということです。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 が適切に初期化されていない場合、quot;falsy" が発生する可能性があります。このような場合、次のような初期化を行う必要があります。 foo をコントローラで使用します。

デフォルトのオプションをカスタマイズする。

ここでは、selectの子としてoptionタグを追加し、value属性を空にして、その内側のテキストをカスタマイズすればよいのです。

<select ng-model="foo" ng-options="item as item.name for item in items">
   <option value="">Nothing selected</option>
</select>

注意: この場合、"empty" オプションは、別のオプションを選択した後でもそこに留まることになります。これは、AngularJSでのselectsのデフォルトの動作とは異なります。

カスタマイズされたデフォルトのオプションで、選択が行われた後に非表示になります。

カスタマイズしたデフォルトのオプションが、値を選択した後に消えるようにしたかったら、デフォルトのオプションに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>