我已经在其他帖子中阅读过,但是我无法弄清楚。
我有一个数组
$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设置为所选值”。
ng-model="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实际上允许您使用选择控件选择整个对象,而不仅仅是原始类型。例如:
ng-options
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处理;您应该只关心范围内模型中的内容。
$scope.selectedItem
这是一个演示上述行为的代码,并显示了写出的HTML
处理默认选项:
关于默认选项,我上面没有提到几件事。
选择第一个选项并删除空选项:
您可以通过添加一个简单ng-init的模型来实现此目的,该模型将模型(from ng-model)设置为您在其中重复的项目中的第一个元素ng- options:
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恰好正确初始化为“ fassy”,这可能会有点疯狂。在这种情况下,您foo很可能希望在控制器中处理的初始化。
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>