45

I would like to have a select with a placeholder in Angularjs with bootstrap. The solutions I have found do not work with Angular

Here is my Angular markup:

<select ng-model="myModel" 
     ng-options="p.name for p in ..."
     class="form-control list-selector required">
   <option value='' disabled selected>Please Choose</option>
</select>

How can I make this work?

2 Answers 2

78

You need to add an empty option to your select:

<option value="">- Please Choose -</option>

Here is a working example: http://jsfiddle.net/DianaNassar/FShdc/

10
  • Can you make a JSFiddle out of it so we can check? Jun 11, 2014 at 11:33
  • 2
    You were right, it's working correctly. Thanks for you help! jsfiddle.net/unludo/jZS95/8
    – unludo
    Jun 12, 2014 at 18:08
  • 2
    1 thing that was giving me problems is that the model of the select must be set to an empty string for this to work, I had it set to an empty object and it was creating an extra blank line in my options...hope this helps someone later :D
    – DrCord
    Apr 25, 2015 at 16:30
  • It doesn't help when the select ng-model is marked as required. Is there a way you can assign null value to this option so that form remains invalid? Apr 14, 2016 at 11:00
  • 1
    @BigMoney - I think you can still use ng-model on the select, see the jsfiddle.
    – DrCord
    Jun 23, 2016 at 14:29
0

For Angularjs Versions and reactive forms , if you are using ngValue to bind values in options , the following type of solution will work:

<option value='' selected ng-value="null">Please Choose</option>

For Angular 2+ Versions something like this will work-

<select class="form-control"
    formControlName="roomType" 
    (change)="changeRoomType($event)">
    <option [ngValue]="null" selected>Room Type</option>
    <option *ngFor="let room of roomTypes" [ngValue]="room">{{room}}</option>    
    </select>

For reference, check this link out-https://netbasal.com/angular-quick-tip-how-to-show-a-placeholder-in-select-control-bab688f98b98

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.