使用AngularJS的ng-options处理select

Question

我在其他的帖子里读到过，但我想不通。

$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>

我读过select也试过，但我想不通。

Answer 1

需要注意的一点是，ngModel是ngOptions工作所必需的...注意ng-model=“blah”表示“将$scope.blah设置为选定值”。

试试看：

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

以下是AngularJS文档中的更多内容（如果您还没有看到的话）：

对于数组数据源：

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

对于对象数据源：

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

有关AngularJS中选项标记值的一些说明：

当您使用ng-options时，由ng-options写出的选项标记的值将始终是选项标记所涉及的数组项的索引。这是因为AngularJS实际上允许您使用select控件选择整个对象，而不仅仅是基元类型。例如：

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中。关键是，使用AngularJS，您不需要担心选项标记中的内容。让AngularJS来处理；你应该只关心你的模型在你的作用域中有什么。

下面是一个柱塞，演示了上面的行为，并显示了所写出的HTML

处理默认选项：

上面有一些关于默认选项的事情我没有提到。

选择第一个选项并删除空选项：

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

自定义默认选项：

这有点不同；在这里，您需要做的只是添加一个选项标记作为您的select的子标记，带有一个空的value属性，然后自定义它的内部文本：

<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>