Angular dependable Country State City Cascading DropDownList

Rate this post

Angular dependable Country State City Cascading DropDownList

Today, We want to share with you .
In this post we will show you dependable Country-State-City Cascading dropdowns in AngularJs, hear for Cascading drop down/ select list using Angular 2 we will give you demo and example for implement.
In this post, we will learn about Angularjs Cascading Dropdown/Select with demo with an example.

Many a times we need a simple functionality
where we need list of the series of dropdowns menu which are all up to down depended on each other(one by one) to populate.(Like country,state,city,etc..)
simple ng-model directive binds the value to the all parameter in execute ng-change event Cascading DropDownList in AngularJS.
Angular JS really complex on angular all directives which HTML extended all the attributes with all the prefix of ng- (ng-show,ng-hide,ng-model,etc..)

READ :  Vuejs Simple Tooltip Plugin v-tooltip Example

[php]

Example of Cascading Dropdowns in AngularJs :infinityknow.com
http://yourapplicationfolder/1.0.7/angular.min.js
http://appfile.js

Country List:

Please Select value

statesList List: Select
City List : Select {{city}}

[/php]

appfile.js

[php]

function DataCountryListCntrl($scope) {
$scope.DatacountriesList = {
‘India’: {
‘Gujrat’: [‘Rajkot’, ‘Baroda’, ‘Ahemdabad’, ‘Surat’],
‘simalyan’: [‘pinues’, ‘Bhopal’, ‘Jabalpur’],
‘Rajasthan’: [‘devansta’, ‘Ajmer’, ‘ghodeshar’]
},
‘USA’: {
‘zatunjs’: [‘Montgomery’, ‘balkjhi’],
‘calndia’: [‘Sacramento’, ‘Fremont’],
‘languliya’: [‘Springfield’, ‘Chicago’]
},
‘America’: {
‘New South dworts’: [‘goa’],
‘vitarias’: [‘maherban’]
}
};
}

[/php]

Second Example : Cascading DropDownList in AngularJS

[php]

Select

Select

Select


Selected ncountrylist: {{ncountrylist.Id}} – {{ncountrylist.ncountrylistName}}

Selected nstatelist: {{nstatelist.Id}} – {{nstatelist.nstatelistName}}

Selected nstatelist: {{city.Id}} – {{city.CityName}}

[/php]

READ :  Vue js Loading Progress Bar Example - vue-progressbar

javascript File

[php]
function myController($scope) {
$scope.ncountrylist = {};
$scope.nstatelist = {};
$scope.city = {};
var allCountries = [{
Id: 1,
ncountrylistName: “USA”
}, {
Id: 2,
ncountrylistName: “Australia”
}];
var allnstatelists = [{
Id: 1,
nstatelistName: “Washington”,
ncountrylistId: 1
}, {
Id: 2,
nstatelistName: “New York”,
ncountrylistId: 1
}, {
Id: 3,
nstatelistName: “Queensland”,
ncountrylistId: 2
}];
var alldatacitieslist = [{
Id: 1,
CityName: “Washington DC”,
nstatelistId: 1
}, {
Id: 2,
CityName: “New York City”,
nstatelistId: 2
}, {
Id: 3,
CityName: “Brisbane”,
nstatelistId: 3
} ];

$scope.countries = allCountries;

$scope.$watch(‘ncountrylist’, function () {
$scope.nstatelists = allnstatelists.filter(function (s) {
return s.ncountrylistId == $scope.ncountrylist.Id;
});
$scope.city = {};
$scope.nstatelist = {};
$scope.datacitieslist = [];
});

$scope.$watch(‘nstatelist’, function () {
$scope.datacitieslist = alldatacitieslist.filter(function (c) {
return c.nstatelistId == $scope.nstatelist.Id;
});
$scope.city = {};
});
}
[/php]

READ :  Advanced Mysql Sub Complex join Queries Tutorial

Demo :

http://lab.devzone.co.in/angular-js-dropdowns/

http://jsfiddle.net/DotDotDot/TsxTU/14/

http://jsfiddle.net/U3pVM/17833/

http://jsfiddle.net/6eCZC/1/

We hope you get an idea about Angular dependable Country State City Cascading DropDownList
We would like to have feedback on my Information blog .
Your valuable any feedback, Good question, Inspirational Quotes, or Motivational comments about this article are always welcome.
If you liked this post, Please don’t forget to share this as Well as Like FaceBook Page.

We hope This Post can help you…….Good Luck!.

Leave a Reply

Your email address will not be published.