CODEWITHSUNDEEP
javascriptangularjsselectdefault-value
Curtis
Curtis

Reputation: 103388

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

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?

Upvotes: 1

Views: 2323

Answers (2)

musefan
musefan

Reputation: 48435

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.

Upvotes: 2

Nicolas
Nicolas

Reputation: 8670

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

Upvotes: 0

Related Questions