Its been some time since I have written in this blog. Its mainly because of my work schedule. Cutting short personal note, let me introduce the problem.
I have a plain HTML page which has two drop-down which is my interest in the article. The first one is Country, second one is Region/State.
My requirement is to change the Regions when Country is selected/changed. I was trying to implementing this on my own, rather than trying to use features provided by AngularJS. Then with this stackoverflow thread, I was blown out. It was as simple as a filter clause in ng-options. I had never ever dreamed of anything simpler.
Of course in my JSON, region data has a country id which made this approach simpler. Let me share my JSON.
{
"states": [
{
"id": 1,
"code": "KAR",
"name": "Karnataka",
"country": 1,
"region": 1
},{
"id": 2,
"code": "KER",
"name": "Kerala",
"country": 1,
"region": 1
},{
"id": 3,
"code": "MOS",
"name": "Moscow",
"country": 2,
"region": 5
}]
}
In my HTML this is how I had implemented the ng-options for country and region. Should I tell you that country 1 is India, and 5 is Russia?
<select ng-model="editData.country" ng-options="option.id as option.name for option in country.countries"></select>
<select ng-model="editData.region" ng-options="option.id as option.name for option in region.regions | filter:{country:editData.country}"></select>
Now notice the text in Bold, that is all required for this magic to happen. Really hats of to the person who commented on stackoverflow, and AngularJS team for making such a simple framework for people like me. The comment is really easy to miss, and I am reproducing this for my future reference.
ng-options="state.name for state in states | filter:{country:countryCode}"
I have a plain HTML page which has two drop-down which is my interest in the article. The first one is Country, second one is Region/State.
My requirement is to change the Regions when Country is selected/changed. I was trying to implementing this on my own, rather than trying to use features provided by AngularJS. Then with this stackoverflow thread, I was blown out. It was as simple as a filter clause in ng-options. I had never ever dreamed of anything simpler.
Of course in my JSON, region data has a country id which made this approach simpler. Let me share my JSON.
{
"states": [
{
"id": 1,
"code": "KAR",
"name": "Karnataka",
"country": 1,
"region": 1
},{
"id": 2,
"code": "KER",
"name": "Kerala",
"country": 1,
"region": 1
},{
"id": 3,
"code": "MOS",
"name": "Moscow",
"country": 2,
"region": 5
}]
}
In my HTML this is how I had implemented the ng-options for country and region. Should I tell you that country 1 is India, and 5 is Russia?
<select ng-model="editData.country" ng-options="option.id as option.name for option in country.countries"></select>
<select ng-model="editData.region" ng-options="option.id as option.name for option in region.regions | filter:{country:editData.country}"></select>
Now notice the text in Bold, that is all required for this magic to happen. Really hats of to the person who commented on stackoverflow, and AngularJS team for making such a simple framework for people like me. The comment is really easy to miss, and I am reproducing this for my future reference.
ng-options="state.name for state in states | filter:{country:countryCode}"
