带有引导程序的 Angularjs 下拉菜单
[英]Angularjs dropdown menu with bootstrap
问题描述
I am learning angularjs.
我正在学习 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.我不想使用ui.bootstrap和 angular 材料库。
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>
1 个解决方案
解决方案1
1 已采纳 2019-02-15 03:39:24
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:首先， 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>
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();"链接不起作用的原因是因为你有ng-click="$event.preventDefault();" in <nav class="navbar navbar-expand-lg navbar-light bg-light"> also data-toggle="dropdown" .在<nav class="navbar navbar-expand-lg navbar-light bg-light">还有data-toggle="dropdown" 。 Other reason why it might be unaccessable probably because `X-Frame-Options' was set to 'sameorigin' .它可能无法访问的其他原因可能是因为`X-Frame-Options' 被设置为 'sameorigin' 。
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.