CODEWITHSUNDEEP
angularjs
TonyTakeshi
TonyTakeshi

Reputation: 5929

AngularJS - Default select value for drop down with data from server

I have a drop down with angular model binding and data generated from server side. I wish to pre-select the first element of data, however angular js generate an unknown options above my drop down options and I couldn't get my option selected.

Source:

<select ng-model="currency" >
    {% for currency in currencies %}
    <option {% "selected='selected'" if(index==1) %} value="{{ currency["code"]}}">{{ currency["name"]}}</option>
    {% endfor %}
</select>

Generated Data

<select ng-model="currency">
    <option value="? object:004 ?"></option>
    <option value="EUR">Euro</option>
    <option value="SEK">Svenske kroner</option>
    <option value="GBP">Engelske Pund</option>
    <option value="DKK">Danske kroner</option>
    <option  value="USD">Amerikanske Dollar</option>
    <option value="NOK">Norske kroner</option>
</select>

Any idea how to remove the extra option field?

Upvotes: 1

Views: 5097

Answers (3)

Nitin Sali
Nitin Sali

Reputation: 337

You can do like below. you need to specify which currency you wish to get selected.

<select ng-model="currency" >
    <option ng-repeat="currency in currencies" ng-selected="currency.code == 'USD' ? true:false" ng-value="currency.code">{{ currency.name }}</option>
</select>

Upvotes: 2

Rafael S. Menezes
Rafael S. Menezes

Reputation: 41

Please try this:

<select ng-model="currency" >
    <option ng-repeat="currency in currencies" ng-selected="$first" ng-value="currency.code">{{ currency.name }}</option>
</select>

Upvotes: 3

BKM
BKM

Reputation: 7079

Try this in your controller

$scope.currency = $scope.currencies[0].code;

Upvotes: 1

Related Questions