问题:

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>

If someone has a working solution...

thanks :)

回答1:

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/

回答2:

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