☰

AngularJS の ng-options を使用して select を操作する 質問する

tag-icon • tag-icon javascript angularjs html-select ng-options
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のオプションを選択したいです。

読みました選択する試してみましたが、わかりません。

ベストアンサー1

注意すべき点は、ngOptions が機能するにはngModel が必要であることng-model="blah"です... 「$scope.blah を選択した値に設定する」と言っていることに注意してください。

これを試して：

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

AngularJS のドキュメントからさらに詳しくご紹介します (まだご覧になっていない方)。

配列データソースの場合:

  • 配列内の値のラベル
  • 配列内の値のラベルとして選択
  • 配列内の値のグループごとにラベルを付ける = 配列内の値のグループごとにラベルを付けるとして選択

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

  • オブジェクト内の (キー、値) のラベル
  • オブジェクト内の (キー、値) のラベルとして選択
  • オブジェクト内の (キー、値) のグループごとにラベルを付ける
  • オブジェクト内の (キー、値) のグループごとにラベル グループとして選択

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で書き出したplunkerです。

デフォルト オプションの処理:

デフォルト オプションに関連して、上記で言及しなかった点がいくつかあります。

最初のオプションを選択し、空のオプションを削除します。

これを行うには、 で繰り返すアイテムの最初の要素にng-initモデル ( から) を設定する単純な を追加します。ng-modelng-options

<select ng-init="foo = foo || items[0]" ng-model="foo" ng-options="item as item.name for item in items"></select>

注: 適切に初期化されても「偽」になってしまうと、少々おかしなことになるかもしれません。その場合は、おそらくコントローラー内でfooの初期化を処理することになるでしょう。foo

デフォルト オプションのカスタマイズ:

これは少し異なります。ここで必要なのは、空の value 属性を持つ option タグを select の子として追加し、その内部テキストをカスタマイズすることだけです。

<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>

おすすめ記事