Today i have requirement in my angular js project to list the country and there corresponding state. When user selected any country then there state should be listed in the next dropdown. I did googling alot but i did't get any proper solution of it. Then i create a directive of it. I can't list the complete country code here so i just listed the code only for two countries "Afghanistan" and "Albania" .But you can download the complete code from HERE.
Code start here :
How to use this code:
Step 1- First of all you have to download and include this js file on you index page like below
<script src="js/angular-country-state.js"></script>
Step 2- Then you have to call this directive on your html page like below
<country-state-select ng-model="company"></country-state-select>
Note : I am passing the object company in ng-model. You can pass your own object. Now when you submiting your form then you will get the selected country name in company.country variable and your state is in company.state You can change the name of these inputs country and state from the html of code.
If you like this post or having any problem while using this code please comment below i will reply you back with the solution of your problem.
Chears
Happy Coding :)
Code start here :
(function() {
"use strict";
var app = angular.module('angularCountryState', []);
}());
(function(window) {
"use strict";
var template = '<div class="control-group">';
template += '<label for="country" class="col-md-3 col-sm-3 col-xs-12 field-name text-padding">{{stateLabel}}</label>';
template += '<div class="col-md-9 col-sm-8 col-xs-12">';
template += '<select id="county" class="span4" name="state" ng-model="ngModel.county" ng-disabled="!ngModel.country" class="form-control">';
template += '<option value="">Select County</option>';
template +='<option ng-repeat="optStates in states track by $index">{{optStates}}</option>';
template +='</select>';
template +='</div>';
template +='</div>';
template += '<div class="control-group">'
template += '<label for="country" class="col-md-3 col-sm-3 col-xs-12 field-name text-padding">{{countryLabel}}</label>';
template += '<div class="col-md-9 col-sm-8 col-xs-12" val="{{ngModel.country}}">';
template += '<select class="span4" name="country" ng-change="selectCountry()" ng-model="ngModel.country" required class="form-control">';
template += '<option value="">Select Country</option>';
template +='<option ng-repeat="theCountry in countries track by $index" >{{theCountry}}</option>';
template +='</select>';
template +='</div>';
template +='</div>';
angular.module("angularCountryState").directive("countryStateSelect", [ function () {
return {
restrict: "E",
template: template,
scope: { country: "=?", countryState: "=?state", ngModel: '='},
link: function (scope, element, attrs) {
scope.countryLabel = "Country";
scope.stateLabel = "County";
if(typeof attrs.countryLabel != 'undefined'){
scope.countryLabel = attrs.countryLabel;
}
if(typeof attrs.stateLabel != 'undefined'){
scope.stateLabel = attrs.stateLabel;
}
scope.countries = new Array("Afghanistan", "Albania");
scope.state = new Array();
scope.state[1]="Badakhshan|Badghis|Baghlan|Balkh|Bamian|Farah|Faryab|Ghazni|Ghowr|Helmand|Herat|Jowzjan|Kabol|Kandahar|Kapisa|Konar|Kondoz|Laghman|Lowgar|Nangarhar|Nimruz|Oruzgan|Paktia|Paktika|Parvan|Samangan|Sar-e Pol|Takhar|Vardak|Zabol";
scope.state[2]="Berat|Bulqize|Delvine|Devoll (Bilisht)|Diber (Peshkopi)|Durres|Elbasan|Fier|Gjirokaster|Gramsh|Has (Krume)|Kavaje|Kolonje (Erseke)|Korce|Kruje|Kucove|Kukes|Kurbin|Lezhe|Librazhd|Lushnje|Malesi e Madhe (Koplik)|Mallakaster (Ballsh)|Mat (Burrel)|Mirdite (Rreshen)|Peqin|Permet|Pogradec|Puke|Sarande|Shkoder|Skrapar (Corovode)|Tepelene|Tirane (Tirana)|Tirane (Tirana)|Tropoje (Bajram Curri)|Vlore";
//This Function Is Call On Country Drop Down Change.
scope.selectCountry = function(){
var selectedCountry = scope.ngModel.country;
var indexCountry = scope.countries.indexOf(selectedCountry)+1;
scope.states = scope.state[indexCountry].split("|");
scope.countryState = '';
if(scope.states.length == 1){
scope.states = new Array(selectedCountry);
}
//indexCountry correspond to the "Select" label
if(indexCountry == 0){
scope.states = new Array("");
}
}
//This Function Is Use To Load Seleted Country State On Edit Page.
scope.$watch('ngModel',function(){
if(typeof scope.ngModel!="undefined"){
var selectedCountry = scope.ngModel.country;
var indexCountry = scope.countries.indexOf(selectedCountry)+1;
if(indexCountry >0){
scope.states = scope.state[indexCountry].split("|");
if(scope.states.length == 1){
scope.states = new Array(selectedCountry);
}
if(indexCountry == 0){
scope.states = new Array("");
}
}
}
});
}
};
}]);
}());
How to use this code:
Step 1- First of all you have to download and include this js file on you index page like below
<script src="js/angular-country-state.js"></script>
Step 2- Then you have to call this directive on your html page like below
<country-state-select ng-model="company"></country-state-select>
Note : I am passing the object company in ng-model. You can pass your own object. Now when you submiting your form then you will get the selected country name in company.country variable and your state is in company.state You can change the name of these inputs country and state from the html of code.
If you like this post or having any problem while using this code please comment below i will reply you back with the solution of your problem.
Chears
Happy Coding :)