Angular: Getting error while using ng-option

Question

I have this schema:

teams: [
   {
      id: 1,
      name: "Spain"
   },
   {
      id: 2,
      name: "Germany"
   }
]

now I have this select element:

<select ng-model="betSchema.winnerId" ng-options="team.name for team in teams track by team.id">
    <option value="-1">Tie</option>
</select>

the betSchema object looks like this (as default):

{
   winnerId: -1
}

Here is the result I see:

enter image description here

The problems are:
1. I can't see the tie option, and there is one mysteries "blank" option (the first at the top). 2. when the betSchema looks like this:

{
   winnerId: 2
}

I am expecting to see Germany option to be selected.

What am I doing wrong?

jth_92 · Accepted Answer · 2014-06-27 19:04:37Z

1

See this fiddle: http://jsfiddle.net/Mn4SH/4/

There are a couple of things.

When using ng-options Angular is going to overwrite your option tags so you have to add it to your model like such:

scope.teams = [{ id: -1, name: "Tie" }, { id: 1, name: "Spain" }, { id: 2, name: "Germany", }];
Second, you can use track by but using "as" would also work in this context: https://docs.angularjs.org/api/ng/directive/select. You can use obj.dataToBeStoredInModel as obj.labelOfData for obj in objList to get the id for ng-options.

edited Jun 27, 2014 at 19:04

answered Jun 27, 2014 at 18:59

jth_92

1,16010 silver badges25 bronze badges

Sign up to request clarification or add additional context in comments.

6 Comments

vlio20 Over a year ago

I have pushed the "tie team" to the teams array like this: $scope.teams.unshift( {id: -1,name: "Tie"}); and changed the select to this: <select ng-model="bettype.betSchema.winnerId" ng-options="team.id as team.name for team in teams"></select>. Still I am getting a blank option and it is impossible to select any option rather then the blank one.

jth_92 Over a year ago

Do you have a fiddle of it? Sounds like there is a Javascript error if nothing is loading.

vlio20 Over a year ago

No there is no fiddle, but I can point out the the betSchema.winnerId is loaded from server (via service), so when I hard coded setting it - it works fine. but when it is loaded it messes it all up. any ideas? Thanks for the help\!

jth_92 Over a year ago

Sure thing. If using Google Chrome, check the Network tab to see where the request that is loading the betSchema.winnerId. Click on the request and see what the results are. That sounds like the network request is returning something that Angular doesn't like (i.e. undefined).

vlio20 Over a year ago

Yes there was a problem with the data within the DB. Thank you very much! will accept your answer gladly :)

|

Collectives™ on Stack Overflow

Angular: Getting error while using ng-option

1 Answer 1

6 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

6 Comments

Your Answer

Sign up or log in

Post as a guest

Related