AngularJs populate second dropdown based on first dropdown

Question

I have two select input, first one contain countryName, i want to populate the StateName to the second select input depending on the CountryName that is chosen i.e the stateName for the selected country only.

I bind the countryName from the countryData and the State from State Data but I want the StateData to contain item based on the selected country

 <select ng-model="selectedItem.CountryId" class="form-control"
                                ng-options="item._id as item.CountryName for item in countryData">
                            <option value="">Select</option>                                

                          </select>

<select ng-model="selectedItem.StateId" class="form-control"
                                    ng-options="item._id as item.StateName for item in stateData">
                                <option value="">Select</option>                                

                              </select>

Here is how my stateData looks

[
  {
    "StateName": "State1",
    "CountryName": "Country1",
  },
  {
    "StateName": "State2",
    "CountryName": "Country1",
  },
  {
    "StateName": "State3",
    "CountryName": "Country2",
  },
  {
    "StateName": "State4",
    "CountryName": "Country3",
  },
  {
    "StateName": "State5",
    "CountryName": "Country2",
  },
  {
    "StateName": "State6",
    "CountryName": "Country3",
  }
]

Please provide some code, html and js, for what you're trying now — aup, Mar 18 '16 at 09:06
Possible duplicate of [angularjs: cascade dropdown](http://stackoverflow.com/questions/19314810/angularjs-cascade-dropdown) — Tjaart van der Walt, Mar 18 '16 at 09:13

Ross Rawlins · Answer 1 · 2016-03-18T10:36:32.020

You can disable the second drop down until the first is selected. You also need to change your JSON so that the states sit in an array. The second dropdown will only populate once you have selected a country and will then be enabled. -updated

<select ng-options="item.country for item in list" ng-model="selectedCountry"></select>
<select ng-disabled="selectedCountry === {}" ng-options="item.state for item in selectedCountry.states" ng-model="selectedState"></select>

https://jsfiddle.net/Kratos_SA/hjz27yb0/3/

AngularJs populate second dropdown based on first dropdown

1 Answers1