April 4, 2017
AngularJS Cascading DropDownList – Cars and Models
Hi, friends in this post we going to see how to do cascading dropdown list – cars and models using AngularJS. Most of the times we want a functionality where we need a list of dropdowns which are depended on each other to populate. So in this post, we will see how to perform this task using AngularJS. Now we will take three dropdowns cars, models, and variant in the HTML view. In the controller, we have cars, models and variant data in an array format, which will be pinned to $scope as shown below. Now we will describe the role of dropdowns for populating following dropdown in ng-options. I hope this post will help you for cascading dropdown list.
index.html
|
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 49 50 51 52 53 54 55 |
<!doctype html> <html> <head> <meta charset="UTF-8"> <title>SoftAOX | AngularJS Cascading DropDownList - Cars and Models</title> <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/angularjs/1.0.7/angular.min.js"></script> </head> <body ng-app> <div class="container"> <h1 align="center">AngularJS Cascading DropDownList - Cars and Models</h1> <hr/> <div ng-controller="carsList"> <label>Cars</label> <select class="form-control" id="car" ng-model="models" ng-options="car for (car, models) in cars"> <option value=''>Select Car</option> </select> </br> <label>Models</label> <select class="form-control" id="model" ng-disabled="!models" ng-model="variants" ng-options="model for (model,variant) in models"> <option value=''>Select Model</option> </select> </br> <label>Variants</label> <select class="form-control" id="variant" ng-disabled="!variants || !models" ng-model="variant"> <option value=''>Select Variant</option> <option ng-repeat="variant in variants" value='{{variant}}'>{{variant}}</option> </select> </div> </div> <!-- Scripts --> <script> function carsList($scope) { $scope.cars = { 'BMW': { 'M Series': ['M3 Sedan', 'Coupe', 'M5 Sedan', 'X5 M', 'M6 Gran Coupe'], '7 Series': ['730Ld Design Pure Excellence', '730Ld M Sport', '740Li DPE Signature', '750Li Design Pure Excellence (CBU)'], '6 Series': ['640d Eminence', '640d Design Pure Experience'], '5 Series': ['520d', '520d Luxury', '520i Luxury Line', '520d M Sport'] }, 'Jaguar': { 'F Type': ['Coupe', 'V8 S', 'R Coupe'], 'XF': ['Prestige Petrol', 'Prestige', 'R Supercharged 5.0 Litre V8 Petrol'], 'XJ': ['3.0 L (D) Premium Luxury', '2.0 L (P) Portfolio', '3.0 L (D) Portfolio'] }, 'Rolls Royce': { 'Phantom': ['Coupe', 'Drophead Coupe', 'Phantom II', 'Extended Wheelbase'], 'Dawn': ['Convertible'], 'Ghost': ['6.6', 'Series II Extended Wheelbase'] } }; } </script> </body> </html> |
