使用AngularJS的ng-options进行选择

使用AngularJS的ng-options进行选择

要注意的一件事是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

， 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

直接选择整个对象。 关键是，使用AngularJS，您无需担心选项标签中的内容。
让AngularJS处理；您应该只关心范围内模型中的内容。

这是一个演示上述行为的代码，并显示了写出的HTML

---

处理默认选项：

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

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

您可以通过添加一个简单

ng-init

的模型来实现此目的，该模型将模型（from

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