AngularJS では、ng-options ディレクティブを使用して
配列からオプションを生成するには、次の構文を使用します。
<select ng-model="selectedValue" ng-options="item.value as item.label for item in items">
ここで:
を考えてみましょう次の 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 サイトの他の関連記事を参照してください。
![[Web フロントエンド] Node.js クイック スタート](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
