-1

English is not my first language so i don't really know how to explain what is going on with words so i'll just use images :)

I have this select here:

 <select class="form-control input-lg"  name="page" ng-model="campaign.page" ng-required="true">
              <option selected disabled>{{"Select the fan page"|i18n}}...</option>
              <option ng-repeat="page in fanPages" value="{{page}}">{{page.name}}</option>
            </select>

And everything works fine, except that the disabled option "Select fan page" is not showing (check the screen shot)

How it looks when i click

How was it supposed to look like

Anyone knows why this is happening? i can't figure it out. I'm using Angular js, bootstrap

It is generating this HTML

<option value="?" selected="selected"></option>

Why is it generating automatically this option with "?" value?

JJJ
  • 32,902
  • 20
  • 89
  • 102
Michelle Colin
  • 79
  • 9

1 Answers1

0

I thought it was a HTML or CSS problem, but turns out it was Angular JS. By doing this I was able to solve the problem:

 <select class="form-control input-lg"  name="page" ng-model="campaign.page" ng-required="true"
              ng-options="page.name for page in fanPages track by page.id">
            </select>

The empty option is generated when a value referenced by ng-model doesn't exist in a set of options passed to ng-options. This happens to prevent accidental model selection: AngularJS can see that the initial model is either undefined or not in the set of options and don't want to decide model value on its own.

Why does AngularJS include an empty option in select?

Community
  • 1
  • 1
Michelle Colin
  • 79
  • 9