Angularjs dropdown menu with bootstrap

Question

I am learning angularjs. I want to use two different menu structure in my bootstrap website.

One is menu with dropdown and another one menu without dropdown.

In my code dropdown menu working good. But I don't know how to achieve menu link without dropdown structure. I don't want to use ui.bootstrap and angular material libraries.

app = angular.module("myapp", []);
 app.controller("MainController", function($scope, $http) {
   $scope.menus = [
   {
  title: "Menu1", 
  action: "#", 
  menus: [
    {
   title: "Submenu 1a",
   action: "stuff"
    },
    {
   title: "Submenu 1b",
   action: "moreStuff",
   menus: [
     {
    title: "Submenu 1b 1",
    action: "stuff"
     },
     {
    title: "Submenu 1b 2",
    action: "moreStuff"
     }
   ]
    }
  ]
   },
   {
  title: "Menu2", 
  action: "#"
   }
 ]
 });

 $(document).ready(function() {});

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.7/angular.min.js"></script>
<body ng-app="myapp">
    <header ng-controller="MainController">
        <nav class="navbar navbar-expand-lg navbar-light bg-light" ng-click="$event.preventDefault();">
            <a class="navbar-brand" href="#">Navbar</a>
            <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavAltMarkup" aria-controls="navbarNavAltMarkup" aria-expanded="false" aria-label="Toggle navigation">
                <span class="navbar-toggler-icon"></span>
            </button>
            <div class="collapse navbar-collapse" id="navbarNavAltMarkup">
                <div class="navbar-nav">
                    <li ng-repeat="menu in menus" class="nav-item dropdown">
                        <a href="{{menu.action}}" class="dropdown-toggle nav-link" data-toggle="dropdown">{{menu.title}}</a>
                        <ul ng-if="menu.menus" class="dropdown-menu">
                            <li ng-repeat="submenu in menu.menus">
                                <a href="{{submenu.action}}">{{submenu.title}}</a>
                            </li>
                        </ul>
                    </li>
                </div>
            </div>
        </nav>
    </header>
</body>

Mukyuu · Accepted Answer · 2019-02-15T05:21:43.530

First of all ng-if is available on angularjs>1.1.5 so I change your script src from 1.0.7 into 1.1.5:

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.1.5/angular.min.js"></script>

Then I'm adding the following code to check whether menu contains menus or not:

<ng-template ng-if="menu.menus.length > 0">
  <a href="{{menu.action}}" class="dropdown-toggle nav-link" data-toggle="dropdown">{{menu.title}}</a>
  <ul ng-if="menu.menus" class="dropdown-menu">
    <li ng-repeat="submenu in menu.menus">
      <a href="{{submenu.action}}">{{submenu.title}}</a>
    </li>
  </ul>
</ng-template>
<ng-template ng-if="menu.menus.length == null">
  <a href="{{menu.action}}" class="nav-link" data-toggle="dropdown">{{menu.title}}</a>
</ng-template>

app = angular.module("myapp", []);
 app.controller("MainController", function($scope, $http) {
   $scope.menus = [
   {
  title: "Menu1", 
  action: "#", 
  menus: [
    {
   title: "Submenu 1a",
   action: "//placekitten.com/300/300"
    },
    {
   title: "Submenu 1b",
   action: "//placekitten.com/300/300",
   menus: [
     {
    title: "Submenu 1b 1",
    action: "stuff"
     },
     {
    title: "Submenu 1b 2",
    action: "moreStuff"
     }
   ]
    }
  ]
    
   },
   {
  title: "Menu2", 
  action: "//placekitten.com/300/300"
   }
 ]
 });

 $(document).ready(function() {});

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.1.5/angular.min.js"></script>
<body ng-app="myapp">
    <header ng-controller="MainController">
        <nav class="navbar navbar-expand-lg navbar-light bg-light">
            <a class="navbar-brand" href="#">Navbar</a>
            <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavAltMarkup" aria-controls="navbarNavAltMarkup" aria-expanded="false" aria-label="Toggle navigation">
                <span class="navbar-toggler-icon"></span>
            </button>
            <div class="collapse navbar-collapse" id="navbarNavAltMarkup">
                <div class="navbar-nav">
                    <li ng-repeat="menu in menus" class="nav-item dropdown">
                    <ng-template ng-if="menu.menus.length > 0">
                    <a href="{{menu.action}}" class="dropdown-toggle nav-link" data-toggle="dropdown">{{menu.title}}</a>
                        <ul ng-if="menu.menus" class="dropdown-menu">
                            <li ng-repeat="submenu in menu.menus">
                                <a href="{{submenu.action}}">{{submenu.title}}</a>
                            </li>
                        </ul>
                    </ng-template>
                   <ng-template ng-if="menu.menus.length == null">
                          <a href="{{menu.action}}" class="nav-link">{{menu.title}}</a>
                   </ng-template>
                    </li>
                </div>
            </div>
        </nav>
    </header>
</body>

Update:

The reason why the link was not working because you have ng-click="$event.preventDefault();" in <nav class="navbar navbar-expand-lg navbar-light bg-light"> also data-toggle="dropdown". Other reason why it might be unaccessable probably because `X-Frame-Options' was set to 'sameorigin'.

I removed the `ng-click="$event.preventDefault();"` from my code. Now its working perfect. Thankz for your effort. — Saravana, Feb 15 '19 at 04:29

Angularjs dropdown menu with bootstrap

1 Answers1

Update: