我正在学习 angularjs。我想在我的 Bootstrap 网站中使用两种不同的菜单结构。
一个是带有下拉菜单的菜单，另一个是没有下拉菜单的菜单。
在我的代码下拉菜单中运行良好。但是我不知道如何实现没有下拉结构的菜单链接。我不想使用 ui.bootstrap 和 Angular Material 库。
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>最佳答案
首先ng-if在 angularjs>1.1.5 上可用所以我将您的脚本 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();"在 <nav class="navbar navbar-expand-lg navbar-light bg-light">还有data-toggle="dropdown" .它可能无法访问的其他原因可能是因为 `X-Frame-Options' was set to 'sameorigin' .
关于javascript - 带 Bootstrap 的 Angularjs 下拉菜单，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/54701619/