CODEWITHSUNDEEP
angularjsangular-ui
unludo
unludo

Reputation: 5010

<select> placeholder with Angular/Bootstrap not working

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?

Upvotes: 45

Views: 58740

Answers (2)

Dragonknot
Dragonknot

Reputation: 332

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

Upvotes: 0

Diana Nassar
Diana Nassar

Reputation: 2303

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/

Upvotes: 78

Related Questions