时间戳

首页 > 解决方案 > 带有引导程序的 Angularjs 下拉菜单

javascript - 带有引导程序的 Angularjs 下拉菜单

问题描述

我正在学习angularjs。我想在我的引导网站中使用两种不同的菜单结构。

一种是带下拉菜单，另一种是不带下拉菜单。

在我的代码下拉菜单中运行良好。但是我不知道如何在没有下拉结构的情况下实现菜单链接。我不想使用ui.bootstrap和角度材料库。

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>

标签： javascripthtmlcssangularjs

解决方案

首先在angularjs>1.1.5ng-if上可用，所以我将脚本 src 从 1.0.7 更改为 1.1.5：

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

然后我添加以下代码来检查菜单是否包含菜单：

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

更新：

链接不起作用的原因是因为您也ng-click="$event.preventDefault();"有. 它可能无法访问的其他原因可能是因为`X-Frame-Options' 设置为 'sameorigin'。<nav class="navbar navbar-expand-lg navbar-light bg-light">data-toggle="dropdown"

推荐阅读