Angularjs select using ng-options

Question

i want to filter cities using states with 2 select inputes when the first select change it value the second one should be changed according to the first select.

i have an array of items :

$scope.items = [
     {
         name:'state1',
         cities : [
              {id:1,name:'city1'},
              {id:2,name:'city2'},
         ]
     },
     {
         name:'state2',
         cities : [
              {id:1,name:'city1'},
              {id:2,name:'city2'},
         ]
     },
];

i tried this but its not working : first for states :

<select ng-model="state" ng-options="s.id as s.name in states"  ></select>

second for cities :

<select ng-model="city" ng-options="s.cities.id as s.cities.name for s in items | filter:{s.name:state}" ></select>

Michel · Accepted Answer · 2015-03-19 13:08:42Z

3

The first dropdown selects the whole country object. The options of the second dropdown are the cities of the selected country :

<select class="country" ng-model="selectedCountry" ng-options="country.name for country in items">
    <option value="">Choose country</option> 
</select>

<select ng-if="selectedCountry" class="city" ng-model="selectedCity" ng-options="city.name for city in selectedCountry.cities">
    <option value="">Choose city</option> 
</select>

Fiddle

edited Mar 19, 2015 at 13:08

answered Mar 19, 2015 at 10:42

Michel

28.6k6 gold badges67 silver badges72 bronze badges

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

Collectives™ on Stack Overflow

Angularjs select using ng-options

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related