Angularjs ngrepeat and ngoptions, what is "as" "for" keyword?

Question

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

based on above list, below is what I normally use:

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

Very straightforward, as in, I can access the value by using item.xxx

But what is the syntax below:

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

I am totally blur, the as and for keyword is for what purpose? I could not really find the doc that explain this, please help.

PS: Original syntax is <select ng-options="item as item.label for item in items track by item.id" ng-model="selected"></select> but I removed track by, because I understand that by reading from the doc.

Ref these links may it will help you http://stackoverflow.com/questions/12139152/how-to-set-the-value-property-in-angularjs-ng-options http://stackoverflow.com/questions/13047923/working-with-select-using-angulars-ng-options/13049740#13049740 — Dil85, Sep 09 '16 at 10:33

score 1 · Accepted Answer · answered Sep 09 '16 at 11:11

Here's the options list which <select> should refer to populate options.

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

When you write ng-options="item as item.label for item in items", you are iterating over items, where each item is assigned to item by using item in items.

So for 1st iteration, item's value will be:

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

Note that item is an object in this case.

<option> doesn't care about how you're fetching data for it, it only cares about what it needs to show and assign what value when it's selected. So, we tell ng-options using for that take item as input and generate corresponding <option> elements.

Now in select option, suppose you want your input to be id. But hey, who knows what is the meaning of your id, to be human readable you would want to display some meaning message to identify it, which is label in this case.

So, instead of using the entire object, you will use only it's id while using label to identify it(text displayed in dropdown). Now your code changes to:

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

So the final generated HTML becomes something like this:

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

Ok, so in short, before `as` it is for the `option` value, and after `as` it is for the label content? But I copied the code from angularjs website(https://docs.angularjs.org/api/ng/directive/ngOptions), they are using `item` before `as` instead of `item.id`, although using `item.id` make more sense based on your explanation. why they are using `item`? what it mean then? what can be the option value if we use `item`? — Sam YC, Sep 12 '16 at 10:03
@GMsoF Instead of picking just the `id` from the object, they are selecting the entire object. Implies, if you use `item` it'll select the entire object. I've created a plunk(https://plnkr.co/edit/pnJj4OND10enP2fXwLxq?p=preview) to help you understand this better. — Aniket Sinha, Sep 13 '16 at 10:27
I see! Previously I couldn't understand why it select entire object, because `option` value should be string value, plugging in object doesn't make sense. Now I know if the purpose is to use it together with the `select's ng-model`, then it make sense, although most of time, we want to submit the value to server, `select as object` will be unlikely to be useful. — Sam YC, Sep 14 '16 at 00:43

Tobias Timm · Answer 2 · 2016-09-09T10:45:09.590

0

You can find the official documentation in the ngOptions directive https://docs.angularjs.org/api/ng/directive/ngOptions

edited Sep 09 '16 at 10:45

answered Sep 09 '16 at 10:36

Tobias Timm

1,855
15
27

score 0 · Answer 3 · answered Sep 09 '16 at 10:37

<select ng-options="item as item.label for item in items" ng-model="selected"></select> is almost similar in functionality to <select ng-options="item in items" ng-model="selected"></select>

But here the first one is giving more clarity to the framework

in item as item.label for item in items,

'as': item as item.label is telling that in the options of select tag show item.label, but item.label representing whole object item. Which means that even though the option is showing only item.label in DOM, the other properties (id, subtype etc) are also accessible using the ng-model (or selected option)

'for': Here for item in items comes because when mentioning item as item.label the DOM has no idea what is this item. So this is clearly saying that the item in the statement of item.label is an object in the object array $scope.items (or simply itmes in term of DOM)

Angularjs ngrepeat and ngoptions, what is "as" "for" keyword?

3 Answers3