Aug 11 th , Comments. Using ng-options was bit tough for me.

I banged my head couple of times when I actually used ng-options in my code. And most of the times, I had to google and find out how to make it work. But, I could find lot of Stackoverflow links, and infact I understood the concepts after reading those links only.

Here, finally, I decided to write a blog posts about what I learned. The simple way of creating a dropdown in Angular is by using ng-repeat.

Look at the code below:. We have an array of text in a property called items.

The above code is ideal when the items array consists of only string data. However, this cannot be used when the items array contains objects. The reason behind is, option element can only hold string type as its value. This is because an option element can only be bound to string values at present.

If you notice, the selectedItem model is bound to the value of the selected option element. We cannot set the selectedItem model to the object inside items. Therefore we need to use the ng-options for these kind of situations. Now the selectedItem is bound to an object instead of the string value. You can see it in action here. Before we start, read the official documentation here. If you notice, the type of the ng-options is named as a comprehension expression.

As quoted from this link.

Angular 4 | 2 JavaScript C# SQL KnockoutJs Kendo API WPF WCF Interviews.

It is a custom expression specific to ngSelect. You can actually see the regex it uses to parse in the ngSelect source file.

This is the simplest and commonly used expression. This tells ng-options directive to loop through the array, and generate option element containing the current value. The generated html looks like this:.

The value of each option element is the loop couter and the text inside the option element is the current array content.

Note the label is the one generates the text inside each option element. So it should be same name as value if items array contains all premitive type. In the above example, both label and value referred as item.

The flexibility of ng-options is when the array contains objects rather than plain strings. The above code is pretty simple to understand. By default, unless specified, the model bound the parent select box will be the value of the expression. That means, in the previous example, the item is the model for the select element.

If we select the second element in the select box, the model is this:. However, AngularJS provides another variation of expression to change this behaviour. Using select as we can specify a different model to the select box.

Here, each option will have the text as item. Group by is really a short cut for adding options groups. But here, we can specify ng-options to render optgroups based on group value.

The above expression tells Angular to group each options based on the item. If we run the code, the output looks like this. This is similar to the previous one, and the only addition is the track by.

The syntax and usage is same as with ng-repeat. Using track by , we can explicitly tell AngularJS to track each DOM node by the specified value. For example, we can use like this:. Bennadel explained this pretty well in his blog post.

The expression for object data source is similar to the array data source. The only difference in object data source is, everything is key value pairs. The generated html is a select box with all the key names. Similarly, we can create the select box with only values, shown below.

The remaining expressions available for object data source is given below.

Angular ng-options Directive

There is no need of any explanation as they are similar to the array data source. The only difference is, for objects, both key, value are available.

A brief walk-through of the ng-options in AngularJS https: Mastering it properly will save lot of time in your next project. Posted by Shidhin Aug 11 th , AngularJS , ng-options Related posts Mastering the scope of the directives in AngularJS React TDD Example: Unit Testing and Building a React Component with Jest, Gulp and React Test Utils Practical Guide to PreLink, PostLink and Controller Methods of Angular Directives 'Resolve' in AngularJS routes, explained as story. Shidhin is a senior Front end developer working in Namshi.

He is passionate about latest web technologies and open source softwares. A Brief Walk-through of the Ng-options in AngularJS Aug 11 th , Comments Using ng-options was bit tough for me. Look at the code below: Quoted from AngularJS documentation: Re-write the above code using ng-options: We can re-write the above code using ng-options.

The new html looks like below: You can see it in action here If you notice, the first element inside the dropdown is a blank option element. For object data sources, the default model bound to the select box is the value, not the key. That means, in the above example, even though the select box displays only the key names, the model is actually bounds to its value. Try selecting an option in our demo, you can see that the selectedItem is printed as its value.

Please enable JavaScript to view the comments powered by Disqus. I use this space to share my experiences, experiments and thoughts. See more about me in my LinkedIn profile.