0

I have my JSON Data like this. I have two drop down lists: one country and one state. Based on what country is selected, I want to update the states drop down.

$scope.countryOptions = [
        {
            'name': 'India',
            'value': 'india',
            'states': [
                {
                    'name': 'Arunachal Pradesh',
                    'value': 'arunachal-pradesh'
                },
                {
                    'name': 'Andhra Pradesh',
                    'value': 'andhra-pradesh'
                },
                {
                    'name': 'Assam',
                    'value': 'assam'
                },
            ]
        },
        {
            'name': 'United States',
            'value': 'united-states',
            'states': [
                {
                    'name': 'New York',
                    'value': 'new-york'
                },
                {
                    'name': 'Florida',
                    'value': 'florida'
                },
                {
                    'name': 'Massechussettes',
                    'value': 'massechussettes'
                },
            ]
        },
        {
            'name': 'Australia',
            'value': 'australia',
            'states': [
                {
                    'name': 'Victoria',
                    'value': 'victoria'
                },
                {
                    'name': 'Queensland',
                    'value': 'queensland'
                },
                {
                    'name': 'New South Wales',
                    'value': 'new-south-wales'
                },
            ]
        },
    ]
Subin Sebastian
  • 10,870
  • 3
  • 37
  • 42
Yasho Sagar
  • 123
  • 2
  • 7
  • see this fiddle http://jsfiddle.net/annavester/Zd6uX/ – Subin Sebastian Dec 14 '15 at 05:15
  • 2
    http://stackoverflow.com/questions/18723399/cascading-select-dropdowns – Subin Sebastian Dec 14 '15 at 05:16
  • @Subin provides a great code example. You will be making use of Angular's `ng-model` to have two way binding between the element and a scope variable. You then provided your logic against that scope variable to manipulate the other `ng-model` for states. – Sean Perkins Dec 14 '15 at 05:18

1 Answers1

0
  <select ng-model="country" ng-change="update(country)" ng-options="option.value as option.name for option in countryOptions ">
     <option ng-disabled="true"   ng-selected="true" value="">Select a country</option>
  </select>
<br /> <br /> <br /> 

  <select ng-model="state" ng-options="item as item.name for item in countryOptions[index].states " >
      <option ng-disabled="true"  ng-selected="true" value="">Select a state</option>
  </select>


    $scope.update=function(index){
      for(var i=0;i<countryOptions.length;i++){
        if(countryOptions.name == index){
          $scope.index= index;
        }
      }
    };
user3883089
  • 86
  • 3