Setting a default value to AngularJs select which doesn't exist in ng-options

Question

When populating options in an AngularJs <select>, an additional default <option> will be added until a value has been selected.

For example:

  <select 
    ng-model="select1"
    ng-options="title as title for title in ['Option 1', 'Option 2', 'Option 3']">
  </select>

Produces the following HTML markup:

<select ng-model="select1" ng-options="title as title for title in ['Option 1', 'Option 2', 'Option 3']" class="ng-pristine ng-valid ng-empty ng-touched">
   <option value="?" selected="selected"></option>
   <option label="Option 1" value="string:Option 1">Option 1</option>
   <option label="Option 2" value="string:Option 2">Option 2</option>
   <option label="Option 3" value="string:Option 3">Option 3</option>
</select>

Once an option has been selected, for example "Option 1" then the initial <option> element is removed:

<select ng-model="select1" ng-options="title as title for title in ['Option 1', 'Option 2', 'Option 3']" class="ng-valid ng-touched ng-not-empty ng-dirty ng-valid-parse">
   <option label="Option 1" value="string:Option 1">Option 1</option>
   <option label="Option 2" value="string:Option 2">Option 2</option>
   <option label="Option 3" value="string:Option 3">Option 3</option>
</select>

However I would like to add a default value of "Please Select" which is also removed once a value is selected.

If I set the <select> to:

  <select 
    ng-model="select1"
    ng-options="title as title for title in ['Option 1', 'Option 2', 'Option 3']">
    <option value="">Please Select</option>
  </select>

Then the value is not removed once a value has been selected.

I have also tried setting the value to ?, but then the option isn't displayed.

Here is a JsFiddle example to show my issue: https://jsfiddle.net/rq2cgedm/

How can I display a default value in the <select> element which is removed once a valid option has been selected, much like the default AngularJs behaviour?

musefan · Accepted Answer · 2017-10-26 11:01:29Z

2

I did some playing around with your fiddle, and you can solve this problem by adding an option that is disabled and hidden, but is also set as the default value.

This results in the options not being shown in the drop down list for selection, but it still displays the value as the default. Which is what you seem to be trying to achieve.

For example:

<select ng-model="select2" ng-options="title as title for title in ['Option 1', 'Option 2', 'Option 3']">
    <option value="" disabled selected style="display: none;">Please Select</option>
</select>

I have also updated your fiddle to demonstrate.

answered Oct 26, 2017 at 11:01

musefan

48.5k21 gold badges144 silver badges193 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Nicolas · Accepted Answer · 2017-10-02 15:48:41Z

0

I would suggest using an ng-repeat on your options rather than an ng-option. this will allow you to keep the original default value.

<select ng-model="select1">
    <option ng-value="" >default</option>
    <option ng-repeat="option in ['Option 1', 'Option 2', 'Option 3'] track by $index" ng-value="string:option">{{option}}</option>
</select>

Not sure if that's what you meant though

edited Oct 2, 2017 at 15:48

answered Oct 2, 2017 at 15:43

Nicolas

8,7364 gold badges25 silver badges58 bronze badges

Collectives™ on Stack Overflow

Setting a default value to AngularJs select which doesn't exist in ng-options

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related