2

Drop down menu using ng-options in Angular JS

[Social9_Share type="horizontal"]

Create a drop down menu using ng-options in Angular JS

When I wanted to create a drop down in Angular JS, I tried using ng-repeat with select , which is a easier way. But then, when I am having an array of objects I had few difficulties in using ng-repeat. So now lets discuss the problem and identify the solution.

The Problem

Let us see an example of creating a drop down using select with ng -repeat
  • Using simple array of strings
  • Using array of objects


Scenario – I

I am having a string array and trying to create a dropdown using select with ng-repeat


This works fine. The ng-model selectedCity gets bounded to the option value selected by the user. In this dropdown my first line is blank.Angular JS does not support any default values for the first line. To see how to add a default value click here.

Scenario – II
I have an array of javascript objects,with some properties, the value of the property being a string or a primitive number. Now, let me refactor the code. I will again use a select with ng-repeat.

Here, the cityName is assigned to the option value, and also the cityName is shown as dropdown to the user. The ng-repeat directive serves the purpose.
The ng-model mycity gets bounded to the option value(cityName) which is a String that is selected by the user from the drop down.
repeat-1


But, what if I want to get the cityCode from the ng-model, it is not possible to retrieve that. I have to pass cityCode as option value to retrieve it from the ng-model.
So, I refactor the code to

Now, the ng-model mycityis bounded only to the cityCode and prints only the cityCode. The output is shown below

reapeat-2


So, I have a choice either to choose cityCode or cityName for value. What If I use the object city itself as the option value?

Then the ng-model mycity is bounded to the object itself. But now I cannot get the individual properties of the object.

reapeat-3


Solution using ng-options

To solve these kind of issues lets use ng-options attribute.
As per Angular JS Spec,

the ng-options attribute can be used to dynamically generate a list of option elements for the select tag, by iterating an array.
ng-options helps to reduce the memory and increase the speed by not creating a new scope for every repeated instance.
Use ng-options, if the value is not a String.

Lets modify the example by using ng-options directive.

Here, the ng-model newcity gets bounded to a single object city that gets selected from cityList array.
I am populating the dropdown using the cityName(city.cityName ) to show the user. I can also retrieve the object values from the model newcity by using
{{newcity.cityName}}
{{newcity.cityCode}}
The output is shown here.

options-0

Tada. My work becomes simple now. This ng-options attribute provides different ways to fill the dropdown menu. Lets discuss that now.

  • For a Simple Array
  • For Array of Objects


For simple Array
If the array has only string values, then use

label for value in array

Here,
The value specifies the loop counter and the current element of the array.
The label is the one that generates the text that is to be shown to the user in the dropdown.
So, both the label and value must have the same name.

The HTML that gets generated is


option-1


What if the label and the value have different names? The dropdown will not be populated with the text.

The HTML that gets generated is given below


option-2


Now, you know why label and value must be same.


For array of Objects
If the array has objects, using
label for value in array differs a little.

  • The label may specify the property of the object that the user must see in the dropdown.
  • The value specifies the current object from the array.
  • The model gets bounded to a single object of the array that is selected

Here, city represents the individual object and city.cityName(label) represents the text shown in the dropdown.
As the model is attached to the object , use dot(.) operator to print any property of that particular object. you can also print the object details directly .
The output is shown below

options-4

What if I want to show the cityName in the drop down and print only the cityCode property. In this case, you can use

select as label for value in array

For select you can use the property which you want attach to the model.
The label and the value behave similar.

Now the model gets bounded only to the cityCode automatically. The rest of the properties cannot be retrieved.
How to give a default value to the dropdown?
To give a default value to the select use

This will add a default option in the first line of the drop down.
One other way is , if the ng-model is selectedCity, you can initialize it to some variable value in the source array of options in the controller.
$scope.selectedCity = $scope.cities[0];
Now, you don’t even need a dummy options element.
The complete code using ng-options is given below

Guys. Do try this and give me your feedback.
To learn about inbuilt filters in Angular JS click here
Till then,

Happy Coding

Comments(2)

  1. Reply
    Varun says

    Very nice piece of tutorial. Using select element the angular way is usually very confusing for most of the people. This tutorial covers all the ways to handle this situation very effectively.
    One thing I would like to add. To select a default option we can also give an initial value to the ng-model of the select element. So, if the ng-model is selectedCity, we can initialize it to some variable amongst the source array of options in controller.
    $scope.selectedCity = $scope.MyCities[0];
    This way we don’t even have to write a dummy element.
    This technique proves useful in many situations.

    • Reply
      admin says

      Thanks Varun for your feedback. I will also add your suggestions to the post

Post a comment