问题

我已经在其他帖子中看过,但无法弄清楚. 我有数组:

$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并试过,但不能弄清楚.



解决方法

需要注意的一点是,ngModel需要 才能使用ngOptions.注意 ng-model ="blah" blah到所选值".

尝试此操作:

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

for 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

EDIT: For some clarification on option tag values in 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处理,你应该只关心你的范围中的模型中.

这里是一个展示上述行为,显示html写出的plunker < / p>


EDIT 2: Dealing with the default option:

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

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

您可以通过添加一个简单的 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>



相关问题推荐