我有数组:
$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的选项。
我已经阅读这个http://docs.angularjs.org/api/ng.directive:select和尝试,但不能弄清楚。
尝试这个:
<select ng-model="blah" ng-options="item.ID as item.Title for item in items"></select>
这里更多从Angular的文档(如果你还没有看到它):
for array data sources:
- label for value in array
- select as label for value in array
- label group by group for value in array
= select as label group by group for value in arrayfor object data sources:
- label for (key,value) in object
- select as label for (key,value) in object
- label group by group for (key,value) in object
- select as label group by group for (key,value) in object
编辑:对于Angular中的选项标签值的一些澄清
当使用ng-options时,由ng-options写出的选项标签的值将始终是选项标签涉及的数组项的索引。这是因为Angular实际上允许您使用选择控件选择整个对象,而不仅仅是基本类型。例如:
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。关键是,使用Angular,你不需要担心你的选项标签中有什么。让Angular句柄,你应该只关心你的模型在你的范围。
Here is a plunker demonstrating the behavior above,and showing the html written out
编辑2:处理默认选项:
有一些我上面没有提到的与默认选项有关的东西。
选择第一个选项并删除空选项:
您可以通过添加一个简单的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碰巧被正确初始化为“falsy”,这可能会有点疯狂。在这种情况下,您将需要在控制器中处理foo的初始化,最有可能。
自定义默认选项:
这有点不同,这里所有你需要做的是添加一个选项标签作为你的选择的子元素,具有一个空的值属性,然后自定义它的内部文本:
<select ng-model="foo" ng-options="item as item.name for item in items"> <option value="">Nothing selected</option> </select>
注意:在这种情况下,“空”选项将保持在那里,即使选择了一个不同的选项。这不是在Angular下的选择的默认行为的情况。
进行选择后隐藏的自定义默认选项:
如果希望在选择值之后您的自定义默认选项消失,可以将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>