Nested Material Lists

Question

I want to create a nested list (tree) in my application, as shown below. Please suggest me how to create such a list.

Answer 1

Starting with Angular 1.2, you can use ng-start / ng-end to create nested trees / iterate over nested lists.

<md-list flex>
  <md-list-item style="margin-left: 10px;"ng-repeat-start="item in nestedList">{{item.id}}</md-list-item>
  <md-list-item style="margin-left: 50px;" ng-repeat-end ng-repeat="child in item.children">{{child.id}}</md-list-item>
</md-list>

http://codepen.io/jdeyrup/pen/JRPNyW

Answer 2

Unfortunately, with regard to the latest releases of angular material, there is no such directive for creating such a tree-like menu; you have to combine different directives, such as a sidebar and a vertical menu.

I used the sidebar in my project:

<section class="wrapper" layout="row" flex>
    <md-sidenav class="md-sidenav-left md-whiteframe-z3 background-red" md-component-id="left" md-is-locked-open="$mdMedia('gt-md')">
        <md-toolbar>
            <img class="logo" src="images/logo.png" />
        </md-toolbar>
        <md-content ng-controller="LeftCtrl">
            <menu></menu>
            <md-button ng-click="close()" class="md-primary" hide-gt-md>
                Close Sidenav Left
            </md-button>
        </md-content>
            <div flex></div>
            <div class="copy">Copyright &copy; 2015</div>
        </md-sidenav>
        <md-content class="wrapper" flex>
        <div class="wrapper ngview-wrapper" layout="column" layout-fill layout-align="top center" ng-view></div>
        <div flex></div>
    </md-content>
</section>

, . , ,