How to implement Cascading Drop Down List in MVC SPA using Angular JS?

Question

I'm trying to learn MVC Single Page Application(SPA) with angularjs, and i've no idea that how to implement Cascading Drop Down List in it. Any help is appreciated.

Thanks in advance,

Naga Phaneendra.

Answer 1

Most of the time this sort of menu is accomplished by generating some sort of nested html structure (usually <ul> and <li> tags), then applying a stylesheet and some javascript to show or hide the child elements until they're clicked. There are a billion examples of this online so I will focus this answer on how to generate the nested html (which is the hard part).

You can accomplish this using recursive ng-repeat along with an inline template.

First off you need some sort of tree model in your scope.

var app = angular.module('menuApp', []);

app.controller('MenuController', function($scope) {
    $scope.menu = [
      {
        label : "Main Menu",
        url: "#/main",
        children: [
          { label: "First Child", url: "#/main/1" },
          { label: "Second Child", url: "#/main/2",
            children: [
              { label: "First Grandchild", url: "#/main/2/1" },
              { label: "Second Grandchild", url: "#/main/2/2" }
            ]
          },
          { label: "Third Child", url: "#/main/3",
            children: [
              { label: "Third Grandchild", url: "#/main/3/3" },
              { label: "Fourth Grandchild", url: "#/main/third/fourth",
                children: [
                  { label: "First Great-Grandchild", url: "#/main/3/4/1" },
                  { label: "Second Great-Grandchild", url: "#/main/3/4/2" }
                ]
              }
            ]
          }
        ]
      }
    ];
});

Now in your view, you can do.

<ul ng-controller="MenuController">
  <li ng-repeat="item in menu" ng-include="'menu-tree.html'"></li>
</ul>

<script type="text/ng-template"  id="menu-tree.html">
  <a href="{{item.url}}">{{item.label}}</a>
  <ul>
    <li ng-repeat="item in item.children" ng-include="'menu-tree.html'"></li>
  </ul>
</script>

Here's a link to a working example. http://plnkr.co/edit/V6aVx0JeBFwrUgPZs0vw?p=preview

Answer 2

I think that you want to support Ajax in your cascading drop-down list. This link to JSFIDDLE contains good example for cascading DDL using both, Ajax and Static list. http://jsfiddle.net/annavester/Zd6uX/

The Html of the Cascading DDL:

<div ng-controller="AjaxCtrl">
  <h1>AJAX - Oriented</h1>
<div>
    Country: 
    <select id="country" ng-model="country" ng-options="country for country in countries">
      <option value=''>Select</option>
    </select>
</div>
<div>
    City: <select id="city" ng-disabled="!cities" ng-model="city" ng-options="city for city in cities"><option value=''>Select</option></select>
</div>
<div>
    Suburb: <select id="suburb" ng-disabled="!suburbs" ng-model="suburb" ng-options="suburb for suburb in suburbs"><option value=''>Select</option></select>        
</div>

As you can see, we use ng-options to populate the data in the DDL. the DDL will return in the $scope the selected object. so don't wary about how to handle id and title that will appears in options of the DDL.

next the controller code as follow:

function AjaxCtrl($scope) {
$scope.countries = ['usa', 'canada', 'mexico', 'france'];
$scope.$watch('country', function(newVal) {
    if (newVal) $scope.cities = ['Los Angeles', 'San Francisco'];
});
$scope.$watch('city', function(newVal) {
    if (newVal) $scope.suburbs = ['SOMA', 'Richmond', 'Sunset'];
});
}

as you can see, we use $watch to watch change in the DDL. replace this line of code

if (newVal) $scope.cities = ['Los Angeles', 'San Francisco'];

with the code that fires Ajax request to select data based on newVal.ID and fill cities with results using $http.get