select binding using ng-options in angularJS

Question

I am trying to bind the the items to my select using ng options,and retreiving the value using ng model. HTML code:

  <select class="form-control" data-ng-options="s.Value as s.Name for s in PageData.CountryCollection" data-ng-model="PageData.PageInfo.CounrtyID"> </select> 

AngularJS COde:

 $cope.PageData.CountryCollection=[{Value:1,Name:xyz},{Value:2,Name:abc},....] $cope.PageData.PageInfo={CountryID:1,CounrtyName:bcd,population:5m} 

In this type of scenario,I am getting the items duplicate in the select list like xyz abc xyz abc.

Can any one please help me to solve this???

Answer 1

Without more code it's not possible to tell why you're getting repeat values. You can try using track by to see if that helps, but without more information it's impossible to tell.

<select class="form-control" 
    data-ng-options="s.Value as s.Name for s in PageData.CountryCollection track by $index" 
    data-ng-model="PageData.PageInfo.CounrtyID">
</select>

I can however tell you that based on your example, your code probably isn't going to work how you expect it to.

Setting your ng-model to PageData.PageInfo.CountryID is only going to update the ID for that object. If you want to set the PageInfo object to object in the drop down set up your select like this:

<select class="form-control" 
    data-ng-options="s.Name for s in PageData.CountryCollection"      
    data-ng-model="PageData.PageInfo">
</select>

A demo of what I'm talking about can be seen on this Plunk