CODEWITHSUNDEEP
htmlmobilehtml-selectionic-framework
Marco
Marco

Reputation: 219

Select default option not working with Ionic Framework

I am using Ionic Framework.
I would like to enter the first option as the default, but doing it this way does not work.
What can I do?

<select ng-model="newSpesaAereo.valuta">
    <option ng-selected="selected">Euro</option>
    <option>Dollaro</option>
    <option>Dollaro canadese</option>
    <option>Sterlina</option>
</select>

enter image description here

If I analyze the page with Google Chrome Developer Utility I watch this.

enter image description here

If I edit this HTML and I delete the selected row, then Euro is visible.

Why is this happening?

Upvotes: 6

Views: 12655

Answers (3)

David living in South Korea
David living in South Korea

Reputation: 141

Set ng-selected="true".

Example:

<option ng-selected="true">Carta di credito</option>

Upvotes: 14

lisimba.gilkes
lisimba.gilkes

Reputation: 166

The reason the default option isn't working is because, in your controller, you've likely initialised your form model like so:

$scope.newSpesaAereo = {}

If you want to set default form options, you should also set them in the form model. For example, set 'valuta' to 'Euro' like so:

 $scope.newSpesaAereo = { valuta: "Euro" }

I hope this helps!

P.S when posting issues like this you should also include the code for the controller that the view is bound to.

Upvotes: 10

Jamie Sutherland
Jamie Sutherland

Reputation: 2790

You need to use ng-selected instead of just selected.

https://docs.angularjs.org/api/ng/directive/ngSelected

<select ng-model="newSpesaAereo.metodoPagamento">
  <option ng-selected="selected">Carta di credito</option>
  <option>Bancomat</option>
  <option>Contanti</option>
  <option>Altro</option>
</select>

Upvotes: 2

Related Questions