AngularJS - How to add placeholder text to dropdown

Question

I am new to angularjs. I want to add a placeholder to my dropdown. I am not hard coding my dropdown values, it's coming from some where. Can you tell me where i did mistake.

<div class="row form-group">
    <label class="col-md-3">Action<span style="color: #b94a48">*</span></b></label>
    <div class="col-lg-3 col-md-7" style="padding: 0px;">
        <div class="dropdown select" style="width: 100%;">
            <select name="wlOrdActType" class="dropdown multiple" placeholder="-- Please Select --" 
                ng-model="wlOrdActType" 
                ng-options="obj.name as obj.name for obj in ordertypeList"
                style="width: 100%;">
                    <option></option>
            </select>
        </div>
    </div>
</div>

Here every thing is working. But placeholder is not place on the dropdown

Have you tried just putting -- Please Select -- in the empty option tag? — DoctorMick, Dec 04 '14 at 08:22
That is not a place holder right.It treat like a one option. — swetha m, Dec 04 '14 at 08:31
Select boxes don't support the placeholder attribute. The accepted answer on [this SO question](https://stackoverflow.com/questions/5805059/select-placeholder) will give you the best solution. — DoctorMick, Dec 04 '14 at 08:39

score 17 · Answer 1 · answered Dec 04 '14 at 09:36

17

<option value="" disabled selected>Please Select</option>

answered Dec 04 '14 at 09:36

binary1101

179
3

score 6 · Answer 2 · answered Apr 22 '16 at 18:17

6

You can do something like this:

<select ng-model="wlOrdActType" ng-options="obj.name as obj.name for obj in ordertypeList">
  <option value="" selected="selected">Choose one</option>
</select>

answered Apr 22 '16 at 18:17

MatayoshiMariano

2,026
19
23

Please add more detail and explain the solution - why and how will this solve OP's problem? What technique was OP not using? – Knetic Apr 22 '16 at 18:41

score 3 · Answer 3 · answered Nov 24 '16 at 16:28

Could also try this:

<select required class="form-control" ng-model="myModel" 
ng-options="item as item.title for item in list">
    <option value="" label="-- Select option --" disabled selected="selected">      
    </option>
</select>

While having the model set to an empty string in the controller.

 $scope.myModel = "";

score 0 · Answer 4 · answered Sep 29 '17 at 17:12

I am using Angular v1.6.6. So, check for older version's compatibility. I believe the below code should work v1.5 onwards.

$scope.ordertypeList = ordertypeListFromApiCall; // Get the collection from API
$scope.ordertypeList.splice(0,0, {'id' : '', 'name' : 'Select Order Type...' } );                 
$scope.wlOrdActType = $scope.ordertypeList[0];

And in the HTML,

<select class="form-control" ng-model="wlOrdActType" required ng-options="ordertype.name disable when ordertype.id == '' for ordertype in ordertypeList track by ordertype.id">
</select>

In the itemSelected function, make sure that the id of $scope.wlOrdActType is not empty

AngularJS - How to add placeholder text to dropdown

4 Answers4