Search code examples
angularjsselectng-options

How to get a value in cascade selects with AngularJS?

I've go a list of states and cities like this:

var complejos = {
    'Buenos Aires': {
         '25 de Mayo': [],
         '3 de febrero': [],
         'A. Alsina': [],
         'A. Gonzáles Cháves': [],
         'Aguas Verdes': [],
         'Alberti': [],
         'Arrecifes': [],
         'Ayacucho': [],
         'Azul': [],
         'Bahía Blanca': []},
    'Capital Federal': {
         'Agronomía': [],
         'Almagro': [],
         'Balvanera': [],
         'Barracas': [],
         'Belgrano': [],
         'Boca': [],
         'Boedo': [],
         'Caballito': []}
}

In my code, I have two md-select, one to the user be able to select their state and after that their city. Example: Buenos Aires -> 3 de febrero.

I've got the following code:

<select id="state" ng-model="cities" ng-options="state for (state, cities) in complejos">
    <option value=''>Choose a state</option>
</select>

<select id="city" ng-disabled="!cities" ng-model="field" ng-options="city for (city, fields) in cities">
    <option value=''>Pick a city</option>
</select>

Works fine, the only problem is that I cannot get the selected values. Instead I get the whole object with a "hashkey value" ($$hashkey: object:116).

How can I use that hashkey to search my result?

Solution

  • In your second <select>, just change 

    ng-options="city for (city, fields) in cities">

    To

    ng-options="city as city for (city, fields) in cities">

    Working JSFiddle