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