Angular dependable Country State City Cascading DropDownList

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..)

    
        <title>Example of Cascading Dropdowns in AngularJs :infinityknow.com </title>
        <a href="http://yourapplicationfolder/1.0.7/angular.min.js">http://yourapplicationfolder/1.0.7/angular.min.js</a>
		<a href="http://appfile.js">http://appfile.js</a>
	
    

        <div>
            <div>
                Country List: 
                
                    Please Select value 
                
            </div>
            <div>
                statesList List: Select
            </div>
            <div>
                City List : Select {{city}}        
            </div>
        </div>

    

appfile.js

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

		

Second Example : Cascading DropDownList in AngularJS

<div>
    <form class="form-inline" name="form">
        <div class="form-group">
            <label for="ncountrylist" class="control-label">ncountrylist</label>
            
                Select
            
        </div>
        <div class="form-group">
            <label for="nstatelist" class="control-label">nstatelist</label>
            
                Select
            
        </div>
        <div class="form-group">
            <label for="city" class="control-label">City</label>
            
                Select
            
        </div>
        <button class="btn btn-primary" type="button">Create</button>
    </form>
    <p>Selected ncountrylist: {{ncountrylist.Id}} - {{ncountrylist.ncountrylistName}}</p>
    <p>Selected nstatelist: {{nstatelist.Id}} - {{nstatelist.nstatelistName}}</p>
    <p>Selected nstatelist: {{city.Id}} - {{city.CityName}}</p>
</div>

javascript File

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 = {};
    });
}

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!.