CODEWITHSUNDEEP
javascripthtmlangularjshtml-select
Ellone
Ellone

Reputation: 3898

Select not displaying its default value

I have a select for which the value is a simple object.

The content displayed as an option is a property of this object but the value is the object itself.

I'm setting a default value for this select by setting the model to the proper object.

But the select doesn't show any value selected, while the model is properly set.

Here are 3 different ways I tried :

Current value of representative.title : {{representative.title}} <br/><br />
<div class="form-group">
  <select ng-model="representative.title" 
          ng-options="title.name for title in titles" 
          ng-disabled="$parent.isDisabled" 
          class="form-control">
  </select>
</div>

<br />

<div class="form-group">
  <select ng-model="representative.title" 
          class="form-control">
    <option ng-repeat="title in titles" 
            value="{{title}}">
              {{title.name}}
    </option>
  </select>
</div>

<br />

<div class="form-group">
  <select ng-model="representative.title" 
          ng-options="title as title.name for title in titles" 
          ng-disabled="$parent.isDisabled" 
          class="form-control">

  </select>
</div>

And in my controller :

$scope.titles = [{"name": "Monsieur"},{"name": "Madame"}];
$scope.representative = {"title": {"name": "Monsieur"}, "otherField": "otherValue"};

Why isn't my select showing the default value ?

How can I fix it ?

(Btw, I'm using Angular 1.2.28)

Upvotes: 2

Views: 129

Answers (1)

nubinub
nubinub

Reputation: 1938

$scope.representative = {"title": $scope.titles[0], "otherField": "otherValue"};

It would be more accurate as you need to pass the reference of one of the object contained in your options array.

Upvotes: 3

Related Questions