Sunday, May 19, 2024
 Popular · Latest · Hot · Upcoming
120
rated 0 times [  122] [ 2]  / answers: 1 / hits: 20982  / 11 Years ago, sun, august 11, 2013, 12:00:00

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 would be able to apply it on any drop down while using only Meta Data and not HTML.



Here's a link to see an example of the code in JSFidlle



HTML



Country:<select data-ng-model=Countries data-ng-options=country.id as country.name for country in Countries.items>
<option value=>Please select a country</option>
</select>

State: <select data-ng-model=currentItem data-ng-options=item.id as item.name for item in currentStates.items>
<option value=>Please select a state</option>
</select>


JavaScript Code:



function Controller($scope) {

var Countries = {
id: field10,
items: [{
id: 10,
StateGroupID:0,
name: United State
},
{
id: 2,
StateGroupID:1,
name: Canada
}]
};

var States =
{ id: field20,
StateGroups: [{
items: [{ id: 1,
name: Alabama
},
{
id: 2,
name: Alaska
},
{ id: 3,
name: Arizona
},
{ id: 4,
name: California
}]},

[{ id: 201,
name: Alberta
},
{
id: 202,
name: British Columbia
},
{
id: 303,
name: Manitoba
},
{
id: 304,
name: Ontario
}]]
};

$scope.Countries = Countries;
$scope.currentStates = States.StateGroups[0];
$scope.$watch('currentStates', function(value, oldValue){
//alert(value);
//alert(JSON.stringify(value));
//$scope.currentStates = (value == 10) ? States.StateGroups[0] : States.StateGroups[1];
});


}


More From » angularjs

 Answers
19

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



 <select data-ng-model=selectedCountry>
<option ng-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



            <select data-ng-model=selectedState >
<option value=>Please select a state</option>
<option ng-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 :)


[#76408] Friday, August 9, 2013, 11 Years  [reply] [flag answer]
Only authorized users can answer the question. Please sign in first, or register a free account.
blaisep

Total Points: 748
Total Questions: 95
Total Answers: 108

Location: Federated States of Micronesia
Member since Sun, May 16, 2021
3 Years ago
blaisep questions
Wed, Dec 16, 20, 00:00, 4 Years ago
Sun, Aug 16, 20, 00:00, 4 Years ago
Tue, Nov 12, 19, 00:00, 5 Years ago
Mon, Nov 11, 19, 00:00, 5 Years ago
;