A brief walk-through of the ng-options in AngularJS
- 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.
- Let’s modify the in our code like below:
The expression for object data source is similar to the array data source.
- ng-options for object allows us to loop through these (key,value) pairs; The expression is pretty much self explanatory, as all other parts are similar to what we have seen already.
- For object data sources, the default model bound to the select box is the value, not the key.
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 …
@shidhincr: A brief walk-through of the ng-options in #AngularJS via @shidhincr
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. Looking the AngularJS documentation didn’t help much, as it’s less informative and doesn’t have much code samples.
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. And you know, this post is going to be mostly useful to me more than any one; because next time, I don’t need to google it.. 🙂
Before that, let’s see ng-repeat. The simple way of creating a dropdown in Angular is by using ng-repeat. Look at the code below:
. 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 AngularJS documentation for ‘select’ says to use ng-options instead of ng-repeat in this scenario. The reason behind is, option element can only hold string type as its value.
Quoted from AngularJS documentation:
Let’s change the items to an array of objects.
and the HTML
model is bound to the value of the selected option element. Here, as already explained, we’re restricted to have only strings in our items array. We cannot set the selectedItem model to the object inside items. Therefore we need to use the ng-options for these kind of situations. Let’s see how to do it.
Re-write the above code using ng-options:
We can re-write the above code using ng-options. The new html looks like below:
is bound to an object instead of the string value. You can see it in action here
If you notice, the first element inside the dropdown is a blank option element. This is because, initially, the ‘selectedItem’ does not have any default value and is undefined. Since there’s no default option selected, AngularJS will generate a new option tag and select it as default. To fix the issue, just set the ‘selectedItem’ to the first object in the items array.
$scope.selectedItem = $scope.items;
In the next section, we’ll see different types of ng-options expressions.
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
We’ll cover these different type of comprehension expressions with the help of examples below.
For Array data :
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 flexibility of ng-options is when the array contains objects rather than plain strings. To know more, let’s change the items like this:
And we can change our expression as
as the text inside each option element. Let’s move to much more complex type of expressions.
is the model for the select element. If we select the second element in the select box, the model is this:
we can specify a different model to the select box. Let’s see the below example:
value. Let’s see the below code.
and the ng-options in HTML
. If we run the code, the output looks like this
, 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.
For Object data :
in our code like below:
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. ng-options for object allows us to loop through these (key,value) pairs; The expression is pretty much self explanatory, as all other parts are similar to what we have seen already.
Let’s modify the expression like this in our mark-up
The generated html is like this:
The generated html is a select box with all the key names. Similarly, we can create the select box with only values, shown below.
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. However, this behaviour can be changed by using the ‘select as’ syntax.
Thanks for reading !! ng-options is a powerful directive. Mastering it properly will save lot of time in your next project.