如何使用 ng-options 在 AngularJS 中创建动态下拉列表？-js教程-PHP中文网

如何使用 ng-options 在 AngularJS 中创建动态下拉列表？

Linda Hamilton

发布： 2024-11-09 00:54:02

原创

1012 人浏览过

How do you create dynamic dropdown lists in AngularJS using ng-options?

使用 AngularJS 的 ng-options 进行 Select

在 AngularJS 中，ng-options 指令允许您动态生成

从数组生成选项

要从数组生成选项，请使用以下语法：

<select ng-model="selectedValue" ng-options="item.value as item.label for item in items">

登录后复制

其中：

selectedValue 是将绑定到所选对象的模型变量option
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中文网其他相关文章！