javascriptangularjsng-options

How to set the first select option to always be blank

I am using angularjs in a project and in which I am using ng-options for generating <select>.

Initially, when the pages reload and no option element is selected, the HTML generated like below:

<select size="3" ng-model="item" ng-options="s.name for s in itemlist">
<option value="?" selected="selected"></option>
<option value="0">Item 1</option>
<option value="1">Item 2</option>
<option value="2">Item 3</option>
</select>

But when I select an element (ex. Item 2) the first blank select is gone. I know its happening as ng-model is being set by select value. But I want first select always blank so that user can reset the filter.

Solution

  • This will do the work for you:

    <select size="3" ng-model="item" ng-options="s.name for s in itemlist">
    <option value="">Select Option</option>
</select>