AngularJS - Cascading Dynamic Select Lists

Question

I have a dataset that includes region, states and cities. I have 3 select lists which contain the values of each of those data types. I would like the states and cities select lists to populate with the data from their parent object only when it's selected.

Code:

https://jsfiddle.net/tedleeatlanta/4egcw5zs/18/

function TheController($scope) {
    
    $scope.locations = [
    {
        "Region": "USA",
        "States": [
            {
                "stateName": "Georgia",
                "Cities": [
                    {
                        "cityName": "Dunwoody"
                    }
                ]
            },
            {
                "stateName": "Florida",
                "Cities": [
                    {
                        "cityName": "Clearwater"
                    }
                ]
            }
        ]
    },
    {
        "Region": "Canada",
        "States": [
            {
                "stateName": "Quebec",
                "Cities": [
                    {
                        "cityName": "SomeplaceElse"
                    }
                ]
            }
        ]
    },
    {
        "Region": "Europe",
        "States": [
            {
                "stateName": "England",
                "Cities": [
                    {
                        "cityName": "London"
                    }
                ]
            },
            {
                "stateName": "France",
                "Cities": [
                    {
                        "cityName": "Paris"
                    }
                ]
            },
            {
                "stateName": "Germany",
                "Cities": [
                    {
                        "cityName": "Munich"
                    }
                ]
            },
            {
                "stateName": "Spain",
                "Cities": [
                    {
                        "cityName": "Portugal"
                    }
                ]
            }
        ]
    }
];

}

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-controller="TheController" ng-app>

Region:     
<select ng-model="regionSelect" ng-options="location.Region as location.Region for location in locations"><option value="">Select Region</option>
    </select>
    
   
   <br/>
 
State:    
<select ng-disabled="!regionSelect" ng-model="stateSelect" ng-options="location.Region.States.stateName as location.Region.States.stateName for location in locations"><option value="">Select State</option>
</select>
    
    <br/>
Cities:    
<select  ng-disabled="!stateSelect" ng-model="citySelect" ng-options="location.{{regionSelect}}.{{stateSelect}}.stateName as location.Region.States.stateName for location in locations"><option value="">Select City</option>
</select>        
    
    <hr/>
    
    Location: {{locationId}} <br/>
    Another Location: {{anotherLocationId}}
    
    
</div>

I can't seem to get the ng-options verbiage correct to parse the states and cities from my dataset when the parent item is selected.

Túlio Castro · Accepted Answer · 2015-10-29 19:54:43Z

Your JSON structure is ok. It's just a problem with storing the correct parent Value. Look, when you are doing some dependent combo like this, you have to store the previous selected Object, and then show the inherits children. See your fiddle:

function TheController($scope) {
    
    $scope.locations = [
    {
        "Region": "USA",
        "States": [
            {
                "stateName": "Georgia",
                "Cities": [
                    {
                        "cityName": "Dunwoody"
                    }
                ]
            },
            {
                "stateName": "Florida",
                "Cities": [
                    {
                        "cityName": "Clearwater"
                    }
                ]
            }
        ]
    },
    {
        "Region": "Canada",
        "States": [
            {
                "stateName": "Quebec",
                "Cities": [
                    {
                        "cityName": "SomeplaceElse"
                    }
                ]
            }
        ]
    },
    {
        "Region": "Europe",
        "States": [
            {
                "stateName": "England",
                "Cities": [
                    {
                        "cityName": "London"
                    }
                ]
            },
            {
                "stateName": "France",
                "Cities": [
                    {
                        "cityName": "Paris"
                    }
                ]
            },
            {
                "stateName": "Germany",
                "Cities": [
                    {
                        "cityName": "Munich"
                    }
                ]
            },
            {
                "stateName": "Spain",
                "Cities": [
                    {
                        "cityName": "Portugal"
                    }
                ]
            }
        ]
    }
];

}

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-controller="TheController" ng-app>

Region:     
<select ng-model="regionSelect" ng-options="location as location.Region for location in locations"><option value="">Select Region</option>
    </select>
    
   
   <br/>
 
State:    
<select ng-disabled="!regionSelect" ng-model="stateSelect" ng-options="state as state.stateName for state in regionSelect.States"><option value="">Select State</option>
</select>
    
    <br/>
Cities:    
<select  ng-disabled="!stateSelect" ng-model="citySelect" ng-options="city as city.cityName for city in stateSelect.Cities"><option value="">Select City</option>
</select>        
    
    <hr/>
    
    Location: {{locationId}} <br/>
    Another Location: {{anotherLocationId}}
    
    
</div>

Collectives™ on Stack Overflow

AngularJS - Cascading Dynamic Select Lists

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