Implementing Bootstrap Menu in Angular JS 1.5

Question

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

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

Post your code so that we can know how far you have done and at what point you are facing problem. — Ankit Agarwal
– Ankit Agarwal, Commented Apr 12, 2017 at 11:04
@RahulJain is the menulist going to be hardcoded or it would be dynamic? can't we add the child menu items as an array inside the object of it's parent? — tanmay
– tanmay, Commented Apr 12, 2017 at 11:21

user7761868 · Accepted Answer · 2017-04-12 11:49:58Z

1

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>

answered Apr 12, 2017 at 11:49

user7761868

941 silver badge6 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

Rahul Jain Over a year ago

user7761868 thanks for your reply but now the <a> is not working for the parent menu... This attribute is giving problem => data-toggle="dropdown" but If i remove this atribute then submenu is not working.

user7761868 Over a year ago

Hi Rahul, thanks for the feedback. As you said this issue is because of data-toggle attribute. The way to achieve the functionality is to add data-toggle attribute conditionally. We can achieve this with ng-attr attribute. This is the snippet. <a class="dropdown-toggle" href="{{menu.URL}}" ng-attr-data-toggle="{{menu.URL == '#'?'dropdown':''}}">{{menu.LinkText}}

Rahul Jain Over a year ago

need your help... can we chat ?

user7761868 Over a year ago

sure Rahul, we can chat, let me know when is the good time for you.

Rahul Jain Over a year ago

Actually I am facing the following issue : stackoverflow.com/questions/43424624/… I am ready to talk... my skype id is rahuljain257

Collectives™ on Stack Overflow

Implementing Bootstrap Menu in Angular JS 1.5

1 Answer 1

5 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

5 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related