11+ Year IT Industry Experience, Working as Technical Lead with Capgemini | Consultant | Leadership and Corporate Trainer | Motivational and Technical Speaker | Career Coach | Author | MVP | Founder Of RVS Group | Trained more than 4000+ IT professionals | Azure | DevOps | ASP.NET | C# | MVC | WEB API | ANGULAR | TYPESCRIPT | MEAN | SQL | SSRS | WEB SERVICE | WCF... https://bikeshsrivastava.blogspot.in/ http://bikeshsrivastava.com/

How to implement cascading dropdownlist using angularjs?

Today we are implementing exceptionally straightforward case of Cascading Dropdowns in AngularJS.
Some of the time we have to show DropDownLists in our site page such that qualities in one DropDownList are subject to the worth chose in another DropDownList. The most widely recognized case of such a usefulness is nations and states DropDownLists where in light of a chose nation you have to populate the states DropDownList. Additionally chose State you have to populate the City DropDownList.

Basic Example of Cascading DropdownList in AngularJs:-

Step 1:-Create a HTML Page
Step 2:-Include AngularJs library  to support Angularjs in your application inside head tag with script tag.
or /use CDN URL:-<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.5/angular.min.js"></script>
<HTML>
<head>
<script src="angular.js"></script>
<script src="script.js"></script>
</head>
<body>
<div ng-app="mainApp" ng-controller="CountryStateCityCtnl">
        <div> Country:
            <select id="country" ng-model="statessource" ng-options="country for (country, states) in countries"
                ng-change="GetSelectedCountry()">
                <option value=''>Select</option>
            </select>
        </div>
        <div style='height: 15px;'>
            &nbsp;</div>
        <div>
            States:<select id="state" ng-disabled="!statessource" ng-model="citiessource" ng-options="state for (state,city) in statessource"
                ng-change="GetSelectedState()"><option value=''>Select</option>
            </select>
        </div>
        <div style='height: 15px;'>
            &nbsp;</div>
        <div>
            City:<select id="city" ng-disabled="!citiessource || !statessource" ng-model="city"><option value=''>
                Select</option>
                <option ng-repeat="city in citiessource" value='{{city}}'>{{city}}</option>
            </select>
        </div>
        <div style='height: 15px;'>
            &nbsp;</div>
        <div>
            <span>Selected Country: </span>
            <label>
                {{strCountry}}</label>
        </div>
        <div style='height: 15px;'>
            &nbsp;</div>
        <div>
            <span>Selected State: </span>
            <label>
                {{strState}}</label>
        </div>
        <div style='height: 15px;'>
            &nbsp;</div>
        <div>
            <span>Selected City: </span>
            <label>
                {{city}}</label>
        </div>
    </div>
</body>
</HTML>
Step 3:-Create Controller:-script.js file

         var mainApp = angular.module("mainApp", []); mainApp.controller('CountryStateCityCtnl', function($scope) {
            $scope.countries = {
                'India': {
                    'Maharashtra': ['Pune', 'Mumbai', 'Nagpur', 'Akola'],
                    'Madhya Pradesh': ['Indore', 'Bhopal', 'Jabalpur'],
                    'Rajasthan': ['Jaipur', 'Ajmer', 'Jodhpur']
                },
                'USA': {
                    'Alabama': ['Montgomery', 'Birmingham'],
                    'California': ['Sacramento', 'Fremont'],
                    'Illinois': ['Springfield', 'Chicago']
                },
                'Australia': {
                    'New South Wales': ['Sydney'],
                    'Victoria': ['Melbourne']
                }
            };
            $scope.GetSelectedCountry = function () {
                $scope.strCountry = document.getElementById("country").value;
            };
            $scope.GetSelectedState = function () {
                $scope.strState = document.getElementById("state").value;
            };
        });
Step 4:- Run project and check final output:-

                        Cascading Dropdowns in AngularJs Output
Description:-
    The ngOptions ascribe can be utilized to powerfully create a rundown of <option> components for the <select> component utilizing the cluster or protest got by assessing the ngOptions understanding expression. 
At the point when a thing in the <select> menu is chosen, the exhibit component or item property spoke to by the chose alternative will be bound to the model recognized by the ngModel mandate.
In this given example first we are select the country and pass the statesource, similar also select the state from the statesource and pass citysource in the ng-model see below image…
Cascading Dropdowns in AngularJs_Source_Pass

Also we are using the ng-change for get the value of selected country and state. See image below…
                                       Cascading Dropdowns in AngularJs_Selectedvalue

You have just read an article that categorized by title AngularJs by title How to implement cascading dropdownlist using angularjs?. You can bookmark this page with a URL https://bikeshsrivastava.blogspot.com/2016/06/part-18how-to-implement-cascading.html. Thank You!
Author: Bikesh Srivastava - Wednesday, June 8, 2016

3 comments to "How to implement cascading dropdownlist using angularjs?"

Life Is Complicated, But Now programmer Can Keep It Simple.