Cascading DropDownList in AngularJS

You may also like...

10 Responses

  1. mohanraj says:

    i have used same example but i am getting .if i selected india ,maharastra,pune it showing like this
    Selected Country:object:9 , Selected State:object:15, Selected City:pune
    my controller:
    ‘use strict';

    /**
    * @ngdoc object
    * @name test.Controllers.TestController
    * @description TestController
    * @requires ng.$scope
    */
    angular
    .module(‘test’)
    .controller(‘TestController’, [
    ‘$scope’,
    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;
    var datas =$scope.strCountry;
    console.log(JSON.stringify(datas));
    };
    $scope.GetSelectedState = function () {
    $scope.strState = document.getElementById(“state”).value;
    };

    }
    ]);
    please can you help me out

  2. Bikesh sriavstava says:

    Hi,Mohanraj
    use this code to :-
    ///////////////////////////
    $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 = $(‘#country’).find(‘option:selected’).text();

    };
    $scope.GetSelectedState = function () {
    $scope.strState = $(‘#state’).find(‘option:selected’).text();
    };
    /////////////////////////////////////////////
    before use this code add jquery library on your page.

    About me:-I am Bikesh srivastava working as Software Engg from 3 year. in Noida .And i’ve good exp. on MVC,AngularJs,Wcf,Web api,etc.

  3. Arshad says:

    Thanks mate! I needed a triple drop down redirect mechanism and this works like charm.

  4. karthik says:

    ng-options=”country for (country,states) in Countries track by country”

  5. Manvi says:

    thanks! it was really helpful

  6. Zahid says:

    This tutorial works for me…

    The Countries Dropdown list is in Alphabetical order, what i want is to have the same order as written in the $scope. I have readings instead of countries which i want to show as it is.

  7. testionic says:

    hay everyone. could anyone please tell me how to fill dropdown dynamically from a database or json file in angular 2/ ionic 2. i need to drill down to village and parcel level.

  8. Hema Kumar Gantepalli says:

    Very nice solution. Thank you very much.

    I am new to programming and it helped me a lot. It is the exact solution that was looking for a week long.

  9. Hema Kumar Gantepalli says:

    To this, we have another scenarios;

    1. Apart from the cascading , we can select any one of the item like country or state or city.
    2. Based on any one of the selection search
    Please do post the code for this requirement.

  10. Dixon says:

    How can the source be downloaded without filling my computer with so much garbage

Leave a Reply

Your email address will not be published. Required fields are marked *


nine − = 0

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code class="" title="" data-url=""> <del datetime=""> <em> <i> <q cite=""> <strike> <strong> <pre class="" title="" data-url=""> <span class="" title="" data-url="">