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];
});
}