需要注意的一件事是,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) 的标签
- 对象中的(键,值)按组标记
- 为对象中的(键,值)按组选择标签组
有关 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 处理它;您应该只关心您范围内模型中的内容。
这是一个演示上述行为的 plunker,并显示了写出的 HTML
处理默认选项:
关于默认选项,我在上面没有提到一些事情。
选择第一个选项并删除空选项:
您可以通过添加一个简单的方法来做到这一点,ng-init
它将模型(从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
注意:如果碰巧正确初始化为“虚假”的东西,这可能会有点疯狂。foo
在这种情况下,您很可能需要处理控制器中的初始化。
自定义默认选项:
这有点不同;在这里,您需要做的就是添加一个选项标记作为您选择的子项,具有空值属性,然后自定义其内部文本:
<select ng-model="foo" ng-options="item as item.name for item in items">
<option value="">Nothing selected</option>
</select>
注意:在这种情况下,即使您选择了不同的选项,“空”选项也会保留在那里。AngularJS 下选择的默认行为不是这种情况。
进行选择后隐藏的自定义默认选项:
如果您希望自定义的默认选项在您选择一个值后消失,您可以将 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>