ng-model not working with ng-repeat

Question

I'm trying to figure out why the ng-model is not working with the ng-repeat.

There is my code:

$scope.availableCountries = []; APIUtility.getCountries().then(function(data){ $scope.availableCountries = data; $scope.filters.country = "AZ"; }); <select id="eventprice" class="searchpage_select" ng-model="filters.country"> <option value="all">show all</option> <option ng-repeat="countries in availableCountries" value="{{countries.country_iso}}" ng-class="{'element_selected' : filters.country == countries.country_iso}">{{countries.name}}</option> </select>

where:

availableCountries is an object from an API call (well formed, trust me)

$scope.filters is an object containing a lot of filters (including country)

The problem is that if i change the ng-model before or after the API call, the select statement is not updated, i think that if i update the scope before angular has the time to execute his ng-repeat, ng-model stop working and will not update the field.

i added the ng-class to prove that filters.country has the right value (ng-class statement returns true when needed and add the class in the right place, so filters.country contains the right value).

I don't know if i was clear enough. Thanks all for your time!

Tom · Accepted Answer · 2015-07-06 14:12:39Z

4

Use ng-options instead of an ng-repeat on an option field.

<select id="eventprice" class="searchpage_select" ng-model="filters.country" ng-options="country.country_iso as country.name for country in availableCountries"> <option value="all">show all</option> </select>

answered Jul 6, 2015 at 14:12

Tom

7,7401 gold badge26 silver badges49 bronze badges

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

4 Comments

Gumma Mocciaro Over a year ago

Thanks it's working, but i need to put the country_iso inside the value attribute, right now he's add a sort of incremental counter as value <option value="0" selected="selected" label="Andorra">Andorra</option> while i need something like <option value="AN" selected="selected" label="Andorra">Andorra</option>

Gumma Mocciaro Over a year ago

i took a look into the docs and it seems that the first declaration should be the value (so country.country_iso as...) but is not showing me the right value. I also tried country.country_iso as country.country_iso for country in availableCountries (in order to have the country_iso in value and label) and it shows me the iso as label but still this "counter" in value

Tom Over a year ago

Yes, how I have it should put country_iso as the value -- if you can post a fiddle or jsbin or something I can see what's going wrong.

Gumma Mocciaro Over a year ago

something like -> jsfiddle.net/HB7LU/14994 even if my code is a bit more complicated. As you can see, the all option doesn't exist. the first one is empty with value="?" if i preset the model with all and the value are integer. I also tried to preset the model with a valid iso and it works. so i think i don't have to care about the values... I think the only thing is the all field that is not showing

Davide · Accepted Answer · 2015-07-07 08:46:30Z

Problem is in $scope.filters.country = "AZ";

Try this updated jsfiddle

http://jsfiddle.net/HB7LU/15021/

Collectives™ on Stack Overflow

ng-model not working with ng-repeat

2 Answers 2

4 Comments

Comments

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

4 Comments

Comments

Related