Over a million developers have joined DZone.
{{announcement.body}}
{{announcement.title}}

Tutorial: Why Angular Dropdown Automatically Adds an Empty Value

DZone 's Guide to

Tutorial: Why Angular Dropdown Automatically Adds an Empty Value

We look at why Angular automatically populates a dropdown list with an empty value and how you can get around this in your code.

· Web Dev Zone ·
Free Resource

Angular Select Has an Empty Value

Often, I'm faced with this problem while implementing a select (dropdown) in Angular. Here I have tried to walk through why Angular adds an empty value at the beginning of your select list.

Let’s start you have code like this.

<select class="form-control" ng-model="selectedName_noinit" ng-options="employee.id as employee.name for employee in employees"></select>

$scope.employees  is defined as an array in a .js file that has the properties id and name.

This might generate something like:

<select class="form-control" ng-model="selectedName_noinit" ng-options="employee.id as employee.name for employee in employees">
            <option value="?" selected="selected"></option>
            <option value="0">Name1</option>
            <option value="1">Name2</option>
            <option value="2">Name3</option>
</select>


The question arises: Why do we get an option with a value and no text inside?

It’s because your model, selectedName, isn’t initialized with a valid value or, in this case, isn’t initialized at all. In order to not select a default actual value, Angular generates an empty option and selects it by default

How to Fix This

There are two ways to fix such common issues

For example:

<select class="form-control" ng-model="selectedName" ng-options="employee.id as employee.name for employee in employees" ng-init=""></select>

In this code, we specify an initial value for selectedName. On the ng-init we assign the value 0 as selected value for the dropdown.

<select class="form-control" ng-model="selectedName" ng-options="employee.id as employee.name for employee in employees" ng-init="">
            <option value="0" selected="selected">Name1</option>
            <option value="1">Name2</option>
            <option value="2">Name3</option>
</select>

Or, we can use the following line of JavaScript:

$scope.selectedName = 0;


We can define the initial value of selectedName in the controller, so it will generate this:

<select class="form-control" ng-model="selectedName" ng-options="employee.id as employee.name for employee in employees">
            <option value="0" selected="selected">Name1</option>
            <option value="1">Name2</option>
            <option value="2">Name3</option>
</select>

Note that ng-init allows functions. So you could call a function, initSelect(), which could wait for another value to initialize selectedName.

You can find a JSFiddle link for this article here and can play with the code.

Happy coding!

Topics:
html ,web dev ,angular ,web application development ,tutorial

Opinions expressed by DZone contributors are their own.

{{ parent.title || parent.header.title}}

{{ parent.tldr }}

{{ parent.urlSource.name }}