CODEWITHSUNDEEP
javascriptjqueryangularjs
ddsbro
ddsbro

Reputation: 217

Select box not allowing a placeholder with ng-model

I have a dropdown select box, As soon as i put in ng-model= it stops showing a placeholder,

Any ideas why this is happening? I have tried placed ng-selected, Selected and default on the choose option.

Here is the code

  <select id="fontChooser" ng-model="eventData.font" placeholder="Test">
            <option value="0" ng-selected="selected">Choose...</option>
            <option value="Times">Times New Roman</option>
            <option value="Arial">Arial</option>
            <option value="Georgia">Georgia</option>
            <option value="ComicSans">Comic Sans</option>
  </select>

I'm wanting the choose option to be the placeholder of the select box

Upvotes: 0

Views: 52

Answers (2)

Razvan B.
Razvan B.

Reputation: 6771

Use:

<option value="">Choose...</option> <!-- leave the value empty -->

as the placeholder

Plunker

Upvotes: 1

Divya MV
Divya MV

Reputation: 2053

Try using an ng-init

<select id="fontChooser" ng-model="eventData.font" ng-init="eventData.font='Choose'" >
        <option value="Times">Times New Roman</option>
        <option value="Arial">Arial</option>
        <option value="Georgia">Georgia</option>
        <option value="ComicSans">Comic Sans</option>

Upvotes: 0

Related Questions