使用AngularJS的ng-options进行选择

  • Z时代
  • 2024-01-10
  • 分类：问答

我在其他帖子中已经读过，但是我无法弄清楚。

我有一个数组

$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的选项。

我已经阅读了 select

并尝试过，但是我无法弄清楚。

回答：

要注意的一件事是ngOptions起作用 需要 ngModel。请注意，ng-model="blah"这是“将$

scope.blah设置为所选值”。

尝试这个：

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

这里是AngularJS文档的更多内容（如果您还没有看过的话）：

对于数组数据源：

  • 数组中值的标签

  • 选择作为数组中值的标签

  • 标签为数组中的值按组分组=选择标签为数组中的值按组分组

对于对象数据源：

  • 对象中（key，value）的标签

  • 选择作为对象中（key，value）的标签

  • 为对象中的（键，值）分组标签

  • 为对象中的（键，值）按组选择作为标签

对于AngularJS中的选项标签值的一些澄清：

使用时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直接选择整个对象。

处理默认选项：

上面我没有提到与默认选项有关的几件事。

您可以通过添加一个简单ng-init的模型来实现此目的，该模型将模型（fromng-model）设置为您在其中重复的项目中的第一个元素ng-options：

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

注意：如果foo碰巧正确初始化为“fassy”，这可能会有点疯狂。在这种情况下，您foo很可能希望在控制器中处理的初始化。

这有点不同。在这里，您所需要做的就是添加一个选择标签作为您选择的子标签，并带有一个空值属性，然后自定义其内部文本：

<select ng-model="foo" ng-options="item as item.name for item in items">
   <option value="">Nothing selected</option>
</select>

注意：在这种情况下，即使您选择其他选项，“空”选项也将保留在那里。AngularJS下selects的默认行为不是这种情况。

如果希望在选择一个值后取消自定义的默认选项，则可以在默认选项中添加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>

以上是 使用AngularJS的ng-options进行选择 的全部内容， 来源链接： utcz.com/qa/408966.html

回到顶部