CODEWITHSUNDEEP
javascriptangularjshtml
Rahul Jain
Rahul Jain

Reputation: 622

Implementing Bootstrap Menu in Angular JS 1.5

Greetings for the day Everyone,

I am trying to implement Bootstrap Parent - Child Menu using AngularJS 1.5 and I am not able to implement the carret & child menu. So can anyone pls help me out on this.

Array Schema are as follows: ID column random Generated number, ParentCategoryID = 0 means its a Parent Menu & if the value is greater than 0 then it means ParentCategoryID is the child of the Parent "ID".

ID : 1, LinkText: "Activity", URL: "/CRM/Activity/", ParentCategoryID: 0 
ID : 2, LinkText : "Business Partners", URL : "/CRM/BusinessPartner/", ParentCategoryID : 0
ID : 3, LinkText : "Sales", URL : "#", ParentCategoryID : 0 
ID : 4, LinkText : "Sales Opportunities", URL : "/CRM/OpportunityMaster/", ParentCategoryID : 3 
ID : 5, LinkText: "Sales Quotation", URL: "/CRM/SalesQuotation/", ParentCategoryID: 3 
ID : 6, LinkText : "Sales Order", URL : "/CRM/SalesOrder/", ParentCategoryID : 3
ID : 7, LinkText : "Delivery", URL : "/CRM/Delivery/", ParentCategoryID : 0 
ID : 8, LinkText : "Service Call", URL : "/CRM/ServiceCall/", ParentCategoryID : 0 
ID: 9, LinkText: "Customer Equipment Card", URL: "/CRM/EquipmentCard/", ParentCategoryID: 0

enter image description here

Actual HTML of Bootstrap 3.5.5 Menu View Demo

<nav class="navbar navbar-inverse">
  <div class="container-fluid">
    <div class="navbar-header">
      <a class="navbar-brand" href="#">WebSiteName</a>
    </div>
    <ul class="nav navbar-nav">
      <li class="active"><a href="#">Home</a></li>
      <li class="dropdown">
        <a class="dropdown-toggle" data-toggle="dropdown" href="#">Page 1
        <span class="caret"></span></a>
        <ul class="dropdown-menu">
          <li><a href="#">Page 1-1</a></li>
          <li><a href="#">Page 1-2</a></li>
          <li><a href="#">Page 1-3</a></li>
        </ul>
      </li>
      <li><a href="#">Page 2</a></li>
      <li><a href="#">Page 3</a></li>
    </ul>
  </div>
</nav>

Since the menu from database, I am not able to implement its child menu please suggest me solution on this. Plunker

Upvotes: 0

Views: 110

Answers (1)

user7761868
user7761868

Reputation: 94

Can you try this modified code

<!DOCTYPE html>
<html >

  <head>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.0/jquery.min.js"></script>
    <link data-require="[email protected]" data-semver="3.3.5" rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" />
    <link data-require="[email protected]" data-semver="1.5.0" rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" />
    <link data-require="[email protected]" data-semver="1.5.0" rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.5.0/css/font-awesome.min.css" />
    <script data-require="[email protected]" data-semver="1.5.0" src="//cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.0/angular.min.js"></script>
    <script data-require="[email protected]" data-semver="1.5.0" src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-bootstrap/1.2.4/ui-bootstrap-tpls.min.js"></script>
    <script data-require="[email protected]" data-semver="1.5.0" src="//cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.0/angular-animate.min.js"></script>
    <script data-require="[email protected]" data-semver="3.3.5" src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
    <link rel="stylesheet" href="style.css" />
    <script src="script.js"></script>

    <script type="text/javascript">

    </script>
  </head>

  <body ng-app="ACE" ng-controller="LayoutController">
    <nav class="navbar navbar-inverse">
            <div class="container-fluid">
                <div class="navbar-header"></div>
                <!--ng-if="(MenuList | filter:{ParentCategoryID : menu.ID}).length >= 0"-->
                <script type="text/ng-template" id="treeMenu">
                    <a class="dropdown-toggle" data-toggle="dropdown" href="#"  href="{{menu.URL}}">{{menu.LinkText}}
                     <span ng-if="(MenuList | filter:{ParentCategoryID : menu.ID}).length > 0">
                     <span class="caret"></span>
                     <ul class="dropdown-menu">
                        <li ng-repeat="menu in MenuList | filter: {ParentCategoryID : menu.ID}">
                          <a href="#">{{menu.LinkText}}</a>
                        </li>
                      </ul>
                    </span>
                    </a>
                </script>

                <ul class="nav navbar-nav">
                    <li class="dropdown" ng-repeat="menu in MenuList | filter: {ParentCategoryID : 0}" ng-include="'treeMenu'">
                    </li>
                    <li id="btnLogOut"><a href="#">Log out</a></li>
                </ul>
            </div>
        </nav>
  </body>

</html>

Upvotes: 1

Related Questions