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.