understanding for in angular loop in ng-repeat

Question

I was just going through this example online of $watch in angular and basically came across this weird syntax below:

       <select ng-model="countSelection" ng-options="n for n in [5,10,15,20]"></select>

Now i am familiar with the for ..in loop, in native javascript , but what the heck is ng-options="n for n in [5,10,15,20]" ? can anybody explain this ? I have seen the documentation HERE , there are a few similar examples , but nothing quite the same, and i quite puzzled by that syntax, can anybody explain ?

Thank you.

Read the proper documentation docs.angularjs.org/api/ng/directive/ngOptions — charlietfl
– charlietfl, Commented Oct 25, 2015 at 10:44
Please follow-up your questions by either accepting an answer or commenting on them to clarify why you haven't accepted any answer yet. — Tarun Dugar
– Tarun Dugar, Commented Oct 25, 2015 at 12:06
There is no time frame for accepting an answer. don't get desperate for your answer to be accepted. this question is going nowhere and is open for discussion. — Tenali Raman
– Tenali Raman, Commented Oct 25, 2015 at 15:42

Ufuk Hacıoğulları · Accepted Answer · 2015-10-25 10:08:10Z

1

Basically it's not JavaScript, it's a repeat expression that is specific to AngularJS. Here's the definition from the documentation:

The expression indicating how to enumerate a collection.

There are various formats for repeat expressions. AngularJS compiler is able to parse them and provide variables for a loop scope.

answered Oct 25, 2015 at 10:08

Ufuk Hacıoğulları

38.6k14 gold badges120 silver badges157 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Tenali Raman Over a year ago

can you provide a documentation link or an example . thanks

Ufuk Hacıoğulları Over a year ago

@TenaliRaman It's on the page you posted. Scroll down to the arguments section.

punov · Accepted Answer · 2015-10-25 10:12:20Z

Yes, there is tricky and specific implementation of ngOptions for dropdowns, actually, it is documented here.

Long story short: you have an array, and you should tell Angular, what it should pass as value for those options. For example, you have array of objects:

myArr = [{id:1, description:'First'}, {id:2, description:'Second'}, ...]

So if you want to use field ID as a value for select options, you can create the following select:

<select ng-model="countSelection" ng-options="obj.id for obj in myArr"></select>

That's it! In your case, you have the array of numbers, and you want to use this numbers as value for your options. So we can translate this line ng-options="n for n in [5,10,15,20]" as following:

Please, take every element of the array, and call it 'n'. And please use this 'n' as a value for my options.

Tarun Dugar · Accepted Answer · 2015-10-25 10:30:08Z

0

One reason is that it can easily be used to iterate over an array of objects based on a particular key. Say you have the following data:

$scope.arr = [
    {'key1': 1, 'key2': 4},
    {'key1': 2, 'key2': 5}
]

Now, in your markup you can either iterate over key1:

<select ng-model="temp" ng-options="n.key1 for n in arr">

</select>

or over key2

<select ng-model="temp" ng-options="n.key2 for n in arr">

</select>

This ensures your ng-model holds on to the right key's value.

edited Oct 25, 2015 at 10:30

answered Oct 25, 2015 at 10:11

Tarun Dugar

8,9938 gold badges50 silver badges81 bronze badges

Collectives™ on Stack Overflow

understanding for in angular loop in ng-repeat

3 Answers 3

2 Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

2 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related