Question

 $scope.items = [{
   id: 1,
   label: 'aLabel',
   subItem: { name: 'aSubItem' }
 }, {
   id: 2,
   label: 'bLabel',
   subItem: { name: 'bSubItem' }
 }];

基于以上列表，以下是我通常使用的内容：

<select ng-options="item in items" ng-model="selected"></select>

非常简单，因为我可以使用item.xxx

来访问该值

但是下面的语法是什么：

<select ng-options="item as item.label for item in items" ng-model="selected"></select>

我完全模糊，as和for关键字是出于什么目的？我无法找到解释这个问题的文档，请帮忙。

PS：原始语法为<select ng-options="item as item.label for item in items track by item.id" ng-model="selected"></select>，但我删除了track by，因为我通过阅读文档了解到这一点。

Answer 1

以下是<select>应该引用填充选项的选项列表。

 $scope.items = [{
   id: 1,
   label: 'aLabel',
   subItem: { name: 'aSubItem' }
 }, {
   id: 2,
   label: 'bLabel',
   subItem: { name: 'bSubItem' }
 }];

当您撰写ng-options="item as item.label for item in items"时，您正在迭代items，其中使用item将每个项目分配到item in items。

因此，对于第一次迭代，item的值将为：

{
   id: 1,
   label: 'aLabel',
   subItem: { name: 'aSubItem' }
 }

请注意，在这种情况下，item是对象。

<option>并不关心你是如何为它获取数据的，它只关心它需要显示什么，并在选择它时分配什么值。因此，我们告诉ng-options使用for作为输入item并生成相应的<option>元素。

现在在选择选项中，假设您希望输入为id。但是嘿，谁知道你的id的含义是什么？ human 可读，你会想要显示一些含义消息来识别它，在这种情况下是label

因此，在使用id识别它时（下拉列表中显示的文本），您将使用label而不是使用整个对象。现在您的代码更改为：

ng-options="item.id as item.label for item in items"

所以最终生成的HTML会变成这样：

<select>
  <option value="1">aLabel</option>
  <option value="2">bLabel</option>
</select>

Answer 2

您可以在ngOptions指令https://docs.angularjs.org/api/ng/directive/ngOptions

中找到官方文档

Answer 3

<select ng-options="item as item.label for item in items" ng-model="selected"></select>在功能上几乎相似 <select ng-options="item in items" ng-model="selected"></select>

但这里的第一个是更清晰的框架

item as item.label for item in items ，

'as'： item as item.label告诉我们在select标签的选项中显示item.label，但是 item.label代表整个对象项。这意味着即使该选项仅在DOM中显示item.label，也可以使用ng-model（或选定的选项）访问其他属性（id，subtype等）

'for'：此处for item in items来了，因为在提及item as item.label时，DOM不知道这是什么 item 。所以这清楚地表明，item语句中的item.label在对象数组object中是$scope.items（或者只是在DOM的术语中）{ /强>

Angularjs ngrepeat和ngoptions，什么是“as”“for”关键字？

3 个答案: