Dependent Dropdown List with AngularJS

Here the simple AngularJS tutorial on creating Cascading DropDownList with Angular JS.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
<!DOCTYPE html>
<html>
        <head>
        <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/angularjs/1.0.7/angular.min.js"></script>
        <script>
            function CountryController($scope) {
                $scope.countries = {
                    'India': {
                        'Andhra Pradesh': ['Vijayawada', 'Guntur', 'Nellore', 'Kadapa'],
                        'Madhya Pradesh': ['Hyderabad', 'Warangal', 'Karimnagar'],  
                    },
                    'USA': {
                      'San Francisco': ['SOMA', 'Richmond', 'Sunset'],
                      'Los Angeles': ['Burbank', 'Hollywood']
                    },
                    'Australia': {
                        'New South Wales': ['Sydney','Orange','Broken Hill'],
                        'Victoria': ['Benalla','Melbourne']
                    }
                };
            }
        </script>
        </head>
        <body>
        <div ng-app class="container">
          <div ng-controller="CountryController">
            <div class="form-group">
              <label class="control-label" for="Country">Country:</label>
              <select class="form-control input-lg" id="country" ng-model="states" ng-options="country for (country, states) in countries">
                <option value=''>Select</option>
              </select>
            </div>
            <div class="form-group">
              <label class="control-label" for="States">States:</label>
              <select class="form-control input-lg" id="state" ng-disabled="!states" ng-model="cities" ng-options="state for (state,city) in states">
                <option value=''>Select</option>
              </select>
            </div>
            <div class="form-group">
              <label class="control-label" for="City">City:</label>
              <select class="form-control input-lg" id="city" ng-disabled="!cities || !states" ng-model="city" ng-options="city for city in cities">
                <option value=''>Select</option>
              </select>
            </div>
          </div>
        </div>
</body>
</html>

I hope you like this Post, Please feel free to comment below, your suggestion and problems if you face - we are here to solve your problems.

9 Comments

  1. How would you add a display message passed on the third selection. For example select 1, 2 and 3 then give display a comment based on your selected

    Reply

  6. Hello Arjun,
    this is awesome and simple code to understand. Now, my question is how to get value and show them in our view part. When i will select any country that country should be rendered in view and that after when i select state then that state should be rendered in our view par as well as city too.

    Reply

Leave a Reply

Your email address will not be published.