CODEWITHSUNDEEP
angularjshtml
user2959949
user2959949

Reputation: 37

Angular js create dynamic menu using json

I am new to angular js .I need to create a dynamic menu and hyperlink using angular js. I have menu name and hyperlink coming from json and i need to display. Currently i have tried with static menus which is working.

My menu structure is like

Home

Services

        -ser1
        -ser2
        -ser3

About

    -abt1

Contact

All the menu values and hyperlink comes from json file.

This is my json

 [
    {
        "id": 100,
        "product": 0,
        "childs": [
            {
                "id": 200,
                "description": {
                    "id": 0,
                    "name": "Home",
                    "url": "home"
                }
            }
        ]
    },
    {
        "id": 100,
        "description": {
            "id": 0,
            "name": "services",
            "url": "services"
        },
        "parent": null,
        "childs": [
            {
                "id": 200,
                "description": {
                    "id": 0,
                    "name": "Ser1",
                    "url": "Ser1"
                },
                "productCount": 0,
                "childs": [
                    {
                        "id": 250,
                        "description": {
                            "id": 0,
                            "name": "ser2",
                            "url": "Ser2"
                        },
                        "childs": []
                    },
                    {
                        "id": 251,
                        "description": {
                            "id": 0,
                            "name": "ser3",
                            "url": "ser3"
                        },
                        "productCount": 0,
                        "childs": []
                    }
                ]
            }
        ]
    },
    {
        "id": 201,
        "description": {
            "id": 0,
            "name": "About",
            "url": "about"
        },
        "productCount": 0,
        "childs": [
            {
                "id": 203,
                "description": {
                    "id": 0,
                    "name": "abt1",
                    "url": "underground"
                },
                "productCount": 0,
                "childs": []
            }
        ]
    },
    {
        "id": 202,
        "description": {
            "id": 0,
            "name": "Contact",
            "url": "con"
        },
        "productCount": 0,
        "childs": []
    }
]

And this is my HTML

<li class="prod-dropdown" ng-repeat="menu in menus" ng-class="{proddropdown: menu.menus}">
                    <a ng-href="#/{{menu.action}}" ng-class="{'dropdown-toggle': menu.menus}"
                       data-toggle="dropdown">{{menu.menus.desc['name']}} </a>
                    <ul ng-if="menu.menus" class="dropdown-menu">
                        <li ng-repeat="submenu in menu.menus">
                            <a ng-href="#/{{submenu.action}}">{{submenu.desc}}</a>
                        </li>
                    </ul>
                </li>

Upvotes: 1

Views: 23019

Answers (4)

Andrey Ortiz
Andrey Ortiz

Reputation: 1

Review this page http://benfoster.io/blog/angularjs-recursive-templates, they made a multinivel menu since a json structure, no matter how many level do you have. And the example http://jsfiddle.net/NP7P5/1719/

<div ng-app="app" ng-controller='AppCtrl'>
    <script type="text/ng-template" id="categoryTree">
        {{ category.title }}
        <ul ng-if="category.categories">
            <li ng-repeat="category in category.categories" ng-include="'categoryTree'">           
            </li>
        </ul>
    </script>
    <ul>
        <li ng-repeat="category in categories" ng-include="'categoryTree'"></li>
    </ul>
</div>

var app = angular.module("app", []);
app.controller("AppCtrl", function ($scope) {
$scope.categories = [
  { 
    title: "Computers",
    categories: [
      {
        title: "Laptops",
        categories: [
          {
            title: "Ultrabooks"
          },
          {
            title: "Macbooks"
          }
        ]
      },
      {
        title: "Desktops"
      },
      {
        title: "Tablets",
        categories: [
          { 
            title: "Apple"
          },
          {
            title: "Android"
          }
        ]        
      }
    ]
  },
  {
    title: "Printers"
  }
];
});

Upvotes: 0

Jorge Casariego
Jorge Casariego

Reputation: 22212

Here is an example of "Dynamic multi level Menu"

HTML

    <ul class="sidebar-menu" ng-repeat="m in modulos">
      <li class="treeview" ng-repeat="(itemIndex, item) in modulos">
        <a ng-click="showSubmenu(itemIndex)">
          <i class="fa fa-table"></i> <span>{{item.module}}</span>
        </a>

        <ul class="sub-nav" ng-show="isShowing(itemIndex)">
          <li ng-repeat="sub_element in m.submodule">
            <a href="{{sub_element.url}}">{{sub_element.res}}</a>
          </li>
        </ul>
      </li>
    </ul>

Javascript

    $scope.showSubmenu = function(item) {
        if ($scope.activeParentIndex === item) {
          $scope.activeParentIndex = "";
        } else {
          $scope.activeParentIndex = item;
        }
      }

      $scope.isShowing = function(index) {
        if ($scope.activeParentIndex === index) {
          return true;
        } else {
          return false;
        }
      };

      $scope.modulos = [{
        "module": "Admin System ",
        "adm_modulo_id": 1,
        "submodule": [{
          "res": "Angular",
          "url": "#/admin/1"
        }, {
          "res": "Linux",
          "url": "#/admin/2"
        }, {
          "res": "Server",
          "url": "#/admin/3"
        }]

      }];

and the result is here in a Plunk

Upvotes: 0

user2959949
user2959949

Reputation: 37

2 level submenu 

<li class="prod-dropdown" ng-repeat="menu in menus">
            <a ng-href="#/{{menu.description['url']}}" ng-class="{'dropdown-toggle': menu.menus}" class="dropdown-toggle" data-toggle="dropdown">
                {{menu.description['name'] | uppercase}} <span ng-if="menu.childs" class="caret"></span>
            </a>
            <ul ng-if="menu.childs" class="dropdown-menu multi-level" role="menu" aria-labelledby="dropdownMenu">
                <li class="dropdown-submenu" ng-repeat="submenu in menu.childs">
                    <a tabindex="-1" ng-href="#/products/{{submenu.description['url']}}">{{submenu
                        .description['name']}}</a>
                    <ul class="dropdown-menu" ng-if="submenu.childs">
                        <li class="dropdown-submenu" ng-repeat="subofsub in submenu.childs">
                            <a ng-href="#/products/{{subofsub.description['url']}}">{{subofsub.description['name']}}</a>
                        </li>
                    </ul>
                </li>
            </ul>
    </li>

Upvotes: 1

Onur Gazioğlu
Onur Gazioğlu

Reputation: 511

You should use ng-include attribute - http://benfoster.io/blog/angularjs-recursive-templates

Upvotes: 1

Related Questions