CODEWITHSUNDEEP
angularjs
Blaise
Blaise

Reputation: 22222

How to add a placeholder option in drop down list with AngularJS

In a <select> input, we can add a disabled option as a placeholder:

<select>
    <option value="" disabled selected>Select your option</option>
    <option value="1">January</option>
    ...
</select>

But how can we add that disabled option in a <select> built by AngularJS, where ng-options are supplied from the controller?

<select class="month" id="month"
        ng-model="vm.month"
        ng-options="m for m in vm.months">  
</select>

Upvotes: 1

Views: 2953

Answers (1)

Blaise
Blaise

Reputation: 22222

My it is that easy! Thank you HarishR.

<select class="month" id="month"
        ng-model="vm.month"
        ng-options="m for m in vm.months">  
    <option value="" disabled selected>Select your option</option>
</select>

And we can even dynamically show/hide the placeholder option:

<select class="month" id="month"
        ng-model="vm.month"
        ng-options="m for m in vm.months">  
    <option value="" disabled selected ng-hide="vm.month">Select your option</option>
</select>

Upvotes: 5

Related Questions