Angularjs Trigger Country State Dependency

Can someone please help me make my example of Country/State drop down dependency work? I intentionally created JSON in this way because I want the dependency to be generic, so I wo

Solution 1:

first, I think there is a little mistake in your JSON, you should have one "items" before the Canadian states

          {"items": [{  "id": "201",
                    "name": "Alberta"
                   }, .....

After doing this, I would modify your HTML in order to have 2 different model names (the way you did, at the first click you overwrite the list of countries). Then I'll use a different syntax for the ng-repeat, in order to force the value to the StateGroupId

<selectdata-ng-model="selectedCountry"><optionng-repeat='country in Countries.items'value='{{country.StateGroupID}}'>{{country.name}}</option></select>

Doing this allows you to create a function to get the states of the selected group ID :

$scope.getStates=function(){
    console.log($scope.selectedCountry)
     return$scope.backupStates.StateGroups[$scope.selectedCountry].items;
}

Then you can use this function to display them using ng-repeat

<selectdata-ng-model="selectedState" ><optionvalue="">Please select a state</option><optionng-repeat='state in getStates()'>{{state.name}}</option></select>

I modified your fiddle here : http://jsfiddle.net/DotDotDot/TsxTU/14/ , I hope this is the kind of behavior you wanted :)

Solution 2:

I suggest you a bit of refactoring to your data model - it seems tangled. Let's store counties and states in two arrays:

$scope.countries = [{
    "name": "USA",
    "id": 1
  },{
    "name": "Canada",
    "id": 2
}];
$scope.states = [{
    "name": "Alabama",
    "id": 1,
    "countryId": 1
  }, {
    "name": "Alaska",
    "id": 2,
    "countryId": 1
  }, {
    "name": "Arizona",
    "id": 3,
    "countryId": 1
  }, {
    "name": "Alberta",
    "id": 4,
    "countryId": 2
  }, {
    "name": "British columbia",
    "id": 5,
    "countryId": 2
}];

Having this, we can write selects for data:

<select data-ng-model="country" data-ng-options="country.name for country in countries" data-ng-change="updateCountry()">
  <option value="">Select country</option>
</select>
<select data-ng-model="state" data-ng-options="state.name for state in availableStates">
  <option value="">Select state</option>
</select>

It's a pity we cannot use if expressions in selectors - if we can, we do not need a single line of JS! But we need:

$scope.updateCountry = function(){
  $scope.availableStates = [];

  angular.forEach($scope.states, function(value){
    if(value.countryId == $scope.country.id){
      $scope.availableStates.push(value);
    }
  });
}

And that's all. Here is a working plunk for you.

Solution 3:

The easiest way to fix is to refer the currentCountry in the 2nd select and no need to use the $watch to achieve your requirement.

<select data-ng-model="currentCountry"data-ng-options="country.name for country in Countries.items">

<select data-ng-model="currentItem"data-ng-options="item.id as item.name for item in States.StateGroups[currentCountry.StateGroupID].items">

Demo

Solution 4:

angular-country-picker bower install angular-country-picker (or) npm install angular-country-picker

<script src="bower_components/angular-country-picker/country-picker.js"></script>
<scriptsrc="node_modules/angular-country-picker/country-picker.js"></script>

       angular.module('webApp', ['puigcerber.countryPicker']);

       <selectng-model="selectedCountry"pvp-country-picker="name"></select>

       angular.module('myApp', ['puigcerber.countryPicker'])
       .config(function(pvpCountriesProvider) {
        pvpCountriesProvider.setCountries([
        { name: 'Abkhazia', alpha2: 'AB'},
        { name: 'Kosovo', alpha2: 'XK'},
        { name: 'Nagorno-Karabakh', alpha2: 'NK'},
        { name: 'Northern Cyprus', alpha2: 'KK'},
        { name: 'Somaliland', alpha2: 'JS'},
        { name: 'South Ossetia', alpha2: 'XI'},
        { name: 'Transnistria', alpha2: 'PF'}
      ]);
    });