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

使用 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'}
];

将此数据呈现为 对于与每个项目的标题和 id 值相对应的选项，请使用以下代码：

<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中文网其他相关文章！