AngularJS Recursive Views

created by ozkary.com

by ozkary

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.16/angular.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">
<script src="https://code.jquery.com/jquery-2.2.3.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<div ng-app="app">
  <div ng-controller="ctrlMenu as ctrl">
    <div class="body-content panel-body text-center">
      <h2 class="text-info">AngularJS Recursive Templates by ozkary.com</h2>
      <div class="row">
        <div class="col-sm-12">
          <nav class="navbar" style="width:250px">
            <ul class="nav">
              <li data-ng-repeat="item in ctrl.menu" class="collapse" data-ng-init="level=1" data-ng-include="'recursiveView'">
              </li>
            </ul>
          </nav>
        </div>
      </div>
      <script type="text/ng-template" id="recursiveView">
        <a href="{{item.url}}" class="dropdown-toggle" data-toggle="collapse" title="{{item.title}}" data-target="#nav{{item.id}}">
          <i class="fa fa-fw fa-2x {{item.class}}"></i> <span class="nav-header-primary" ng-bind="item.title"></span> &nbsp;
          <span data-ng-if="item.menu" class="fa fa-caret-down fa-2x pull-right"></span>
        </a>
        <ul class="nav collapse" style="margin-left:{{level}}0px" data-ng-if="item.menu" id="nav{{item.id}}">
          <li data-ng-repeat="subitem in item.menu" data-ng-init="level=level+1;item=subitem" data-ng-include="'recursiveView'">
          </li>
        </ul>
      </script>

    </div>
  </div>
</div>

JavaScript

(function(angular) {
  'use strict';

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

  app.controller("ctrlMenu", ["$scope",
    function($scope) {
      var ctrl = this;
      ctrl.menu = [{
        "id": 1,
        "title": "Azure",
        "class": "fa-cloud",
        "url": "#",
        "menu": [{
          "id": 121,
          "title": "Azure AD",
          "class": "fa-cloud",
          "url": "#",
          "menu": [{
            "id": 1210,
            "title": "Settings",
            "class": "fa-cloud",
            "url": "#",
            "menu": [{
              "id": 1210,
              "title": "Apps",
              "class": "fa-cloud",
              "url": "#"
            }, {
              "id": 1211,
              "title": "Users",
              "class": "fa-cloud",
              "url": "#"
            }]
          }]
        }]
      }, {
        "id": 2,
        "title": "AWS",
        "class": "fa-cloud",
        "url": "#",
        "menu": [{
          "id": 21,
          "title": "DMS",
          "class": "fa-cloud",
          "url": "#",
          "menu": [{
            "id": 211,
            "title": "End Points",
            "class": "fa-cloud",

            "url": "#"
          }, {
            "id": 2112,
            "title": "Replication",
            "class": "fa-cloud",
            "url": "#"
          }]
        }]
      }];

    }
  ]);

}(angular));