CODEWITHSUNDEEP
javascripthtmlcssangularjs
Saravana
Saravana

Reputation: 3496

Angularjs dropdown menu with bootstrap

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>

Upvotes: 2

Views: 1079

Answers (1)

Mukyuu
Mukyuu

Reputation: 6759

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'.

Upvotes: 1

Related Questions