ホームページ > 記事 > ウェブフロントエンド > ng-options を使用して AngularJS で動的なドロップダウン リストを作成するにはどうすればよいですか?
ng-options を使用して AngularJS で動的なドロップダウン リストを作成するにはどうすればよいですか?
- Linda Hamiltonオリジナル
- 2024-11-09 00:54:02980ブラウズ
AngularJS の ng-options を使用した選択の操作
AngularJS では、ng-options ディレクティブを使用して
配列からのオプションの生成
配列からオプションを生成するには、次の構文を使用します。
<select ng-model="selectedValue" ng-options="item.value as item.label for item in items">
ここで:
- selectedValue は、選択したオプションにバインドされています
- items は、オプションのデータを含む配列です
- item.value は、オプション要素
- の value 属性に使用される値ですitem.label はオプション要素に表示されるテキストです
例
を考えてみましょう次の AngularJS コントローラー:
$scope.items = [
{id: '000001', title: 'Chicago'},
{id: '000002', title: 'New York'},
{id: '000003', title: 'Washington'}
];
このデータを
<select ng-model="selectedItem" ng-options="item.id as item.title for item in items">
デフォルト オプションの選択
デフォルトで特定のオプションを選択するには、ng-init ディレクティブを使用します。
<select ng-model="selectedItem" ng-init="selectedItem = items[1]" ng-options="item.id as item.title for item in items">
デフォルト オプションのカスタマイズ
カスタム オプションを追加する
<select ng-model="selectedItem">
<option value="">Select One</option>
<option ng-repeat="item in items" ng-value="item.id">{{item.title}}</option>
</select>
選択後のデフォルト オプションの非表示
選択後にカスタムのデフォルト オプションを非表示にするには、ng- を使用します。非表示:
<select ng-model="selectedItem">
<option value="" ng-hide="selectedItem">Select One</option>
<option ng-repeat="item in items" ng-value="item.id">{{item.title}}</option>
</select>以上がng-options を使用して AngularJS で動的なドロップダウン リストを作成するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。
声明：
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。