I'm trying to use the Angular UI Dropdown Toggle to create a multi-level / nested drop down.
When I click on the first level of the dropdown it simply closes up altogether and does not reveal the second tier.
I've attached a very basic plunkr to demonstrate a bare bones version of what I'm trying to achieve.
http://plnkr.co/edit/c0GbKQoYWICXwd3JRWGV?p=info
Any help, greatly appreciated.
Thanks
Sub-menu has been removed from Boostrap 3 as it is deemed irrelevant for mobile.
"Submenus just don't have much of a place on the web right now, especially the mobile web. They will be removed with 3.0" - https://github.com/twbs/bootstrap/pull/6342
An example that uses Bootstrap 3.0.0 (final): http://bootply.com/86684
Code from StackOverflow post:
Bootstrap 3 dropdown sub menu missing
You can use the class "dropdown-submenu" to achieve this.
<div class="btn-group dropdown">
<button class="dropdown-toggle">Toggle</button>
<ul class="dropdown-menu">
<li>Item 1</li>
<li>Item 2</li>
<li class="dropdown-submenu">
Sub List
<ul class="dropdown-menu">
<li>Submenu Item 1</li>
<li>Submenu Item 2</li>
</ul>
</li>
</ul>
</div>
You can use the ng-bootstrap-submenu module to get the sub-menu you're looking for.
https://www.npmjs.com/package/ng-bootstrap-submenu
Here is a plnkr demonstrating it's usage.
<nav class="navbar navbar-default">
<div class="navbar-header">
<button class="navbar-toggle" type="button" data-toggle="collapse" data-target=".navbar-collapse">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand">ng-bootstrap-submenu</a>
</div>
<div class="collapse navbar-collapse">
<ul class="nav navbar-nav">
<bootstrap-submenu ng-repeat="item in menuItems" menu-item="item">
</bootstrap-submenu>
</ul>
</div>
</nav>
Related
I have a webapp built with yeoman gulp-angular generator that uses bootstrap (with sass).
I have a collapsable navbar. When I click on the button with the 3 icon-bars, the menu is not displayed as expected.
I've tested my html apart and it works fine. Fiddle that works is: http://jsfiddle.net/7tzj3y5n/.
Code is:
<nav class="navbar navbar-default navbar-inverse navbar-static-top navbar-inverse-main" role="navigation">
<div class="container">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#navigationbar">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<p class="navbar-brand">Merchandising Control</p>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse navbar-menu" id="navigationbar">
<ul class="nav navbar-nav navbar-right">
<!-- Airline code label -->
<li>Airline:</li>
<!-- Airline code dropdown -->
<li class="dropdown" dropdown>
<a class="dropdown-toggle" dropdown-toggle>{{MainCtrl.getAirlineCode()}} <span class="caret"></span></a>
<ul class="dropdown-menu dropdown-menu-main">
<li ng-repeat="airlineCode in MainCtrl.MAIN_UI_CONSTANTS().airlineCodes" ng-click="MainCtrl.setAirlineCode(airlineCode)">
<a>{{airlineCode.value}}</a>
</li>
</ul>
</li>
</ul>
</div> <!-- /.navbar-collapse -->
</div> <!-- /.container-fluid -->
</nav>
It seems that my installation is not correct.
Could someone help me ?
Regards.
While Bootstrap's js uses data-* attributes on your HTML elements to enable expand / collapse on the navbar, Angular UI Bootstrap (which is what you should be using instead of Bootstrap's js when you have an Angular application) does not work exactly the same way. You can see Angular UI Bootstrap's documentation on Collapse to see how it works, however what you should be doing in short is the following:
Remove Boostrap's js and include Angular UI Bootstrap js an add 'ui.bootstrap' as a dependency of your Angular module (if you haven't already).
Update your HTML to use Angular UI Bootstrap's collapse, ie. something like the following:
<nav class="navbar navbar-default navbar-inverse navbar-static-top navbar-inverse-main" role="navigation" ng-init="navCollapsed = true" >
<div class="container">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle" ng-click="navCollapsed = !navCollapsed">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<p class="navbar-brand">Merchandising Control</p>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse navbar-menu" collapse="navCollapsed">
<ul class="nav navbar-nav navbar-right">
<!-- Airline code label -->
<li>Airline:</li>
<!-- Airline code dropdown -->
<li class="dropdown" dropdown>
<a class="dropdown-toggle" dropdown-toggle>{{MainCtrl.getAirlineCode()}} <span class="caret"></span></a>
<ul class="dropdown-menu dropdown-menu-main">
<li ng-repeat="airlineCode in MainCtrl.MAIN_UI_CONSTANTS().airlineCodes" ng-click="MainCtrl.setAirlineCode(airlineCode)">
<a>{{airlineCode.value}}</a>
</li>
</ul>
</li>
</ul>
</div> <!-- /.navbar-collapse -->
</div> <!-- /.container-fluid -->
</nav>
What this code actually does is use the navCollapsed angular variable to control the menu's expand / collapse.
I have a quite typical scenario:
AngularJS (currently 1.2, want to upgrade to 1.3/1.4 soon)
Bootstrap 3.x
AngularStrap 2.1.x
As top-level menu I place a navbar with some dropdown menus and I'd like it to be collapsable for smaller devices (tablet portrait, phone).
<div class="navbar navbar-inverse navbar-fixed-top"
ng-controller="MenuCtrl" bs-navbar>
<div class="container-fluid" bs-collapse start-collapsed="true">
<div class="navbar-header">
<button type="button" class="navbar-toggle"
bs-collapse-toggle>
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span><span class="icon-bar"></span><span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">ACME</a>
</div>
<div class="navbar-collapse collapse" bs-collapse-target>
<ul class="nav navbar-nav navbar-right">
<li>Home</li>
<li class="dropdown" bs-dropdown>
<a href="#" class="dropdown-toggle"
data-toggle="dropdown"
id="tst-dropdown-session">
Session <b class="caret"></b>
</a>
<ul class="dropdown-menu">
<li>Login</li>
<li>Logout</li>
</ul>
</li>
</ul>
</div>
</div>
</div>
(Of course above code is reduced compared to my real code)
The problem is: when clicking on the top-menu item, only a small dropdown shows up (~10px height) without sub-menu items.
Does anybody have a working example for this?
I could manage the menu items in a model of the controller, but how does "collapse" work then? Any ideas?
Edit (add pictures)
On narrow devices it should not look like this:
But it should more like this:
Define your menu items in controller.
And use it your html template as follows
HTML code
<li>Home</li>
<li class="dropdown" bs-dropdown="dropdownHtml">
<a href="#" class="dropdown-toggle"
id="tst-dropdown-session">
Session <b class="caret"></b>
</a>
</li>
Controller code
$scope.dropdownHtml = [
{
text: "Login",
href: '#/login',
title: 'Log out'
},
{
text: "Logout",
href: '/api/auth/logout',
title: 'Log out'
}
];
I created a contact form with angularJS and when I try to integrate it in the page that I built with bootstrap, the Navbar dropdowns and the toggle button don't work. How do I fix it in the best and easiest way?
Link To My Code
<div class="navbar navbar-inverse navbar-static-top" role="navigation">
<div class="container">
<button class="navbar-toggle" data-toggle="collapse" data-target=".navHeaderCollapse">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<div class="collapse navbar-collapse navHeaderCollapse">
<ul class="nav navbar-nav navbar-right">
<li><span class="glyphicon glyphicon-home"></span> Home</li>
<li class="dropdown">
<span class="glyphicon glyphicon-briefcase"></span> Our Product<b class="caret"></b>
<ul class="dropdown-menu">
<li>A Collaborative Solution </li>
<li>A Robust Platform</li>
<li>How It Works</li>
</ul
</li>
<li class="dropdown">
<span class="glyphicon glyphicon-user"></span> About Us<b class="caret"></b>
<ul class="dropdown-menu">
<li>Our Team</li>
<li>Our Advisory Board</li>
<li>Our Partners</li>
<li>Our Customers</li>
</ul>
</li>
<li class="dropdown">
<span class="glyphicon glyphicon-list-alt"></span> In the News<b class="caret"></b>
<ul class="dropdown-menu">
<li>Press Releases</li>
<li>Industry News</li>
</ul>
</li>
<li class="active"><span class="glyphicon glyphicon-envelope"></span> Contact Us </li>
</ul>
</div>
</div>
</div>
Thanks for the help!
Don't use Bootstrap's js file and try to avoid jQuery with Angular (jQuery shouldn't be needed). Instead, just include UI Bootstrap and it will add bootstrap's JavaScript functionality as Angular directives.
Include the ui-bootstrap script:
<script src="//cdnjs.cloudflare.com/ajax/libs/angular-ui-bootstrap/0.10.0/ui-bootstrap-tpls.min.js"></script>
then, inject it as a module dependency in your app:
angular.module('myApp', [
'ui.bootstrap'
]);
This will make the Bootstrap components work in your application. Be sure to read the documentation for UI Bootstrap.
I have trouble with UI-Router in many ways. I don't understand how it interacts with other frameworks.
Namely, I am trying to implement Bootstrap 3's navbar collapse module, seen below:
<div class="navbar navbar-inverse navbar-fixed-top" role="navigation">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">Project name test</a>
</div>
<div class="collapse navbar-collapse">
<ul class="nav navbar-nav">
<li class="active">Home</li>
<li>About</li>
<li>Contact</li>
</ul>
</div><!--/.nav-collapse -->
</div>
</div>
This is straight from the Bootstrap website and it works fine when inside its own .html page.
The issue is when I insert it into a UI-Router view. The collapsing action no longer works -- I'm guessing because the "data-target" function is somehow unable to find its target.
How does one use Bootstrap 3 with Angular UI? The Angular UI Bootstrap package does not have a navbar module.
The answer below is good. Here is a reference URL Twitter Bootstrap Navbar with AngularJS - Collapse Not Functioning.
You should replace bootstrap native js properties with ui-bootstrap directives (note the ng-click and collapse):
<nav class="navbar navbar-default" role="navigation">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle" ng-click="navbarCollapsed = !navbarCollapsed">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">
<!-- your branding here -->
</a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" collapse="navbarCollapsed">
<!-- your normal collapsable content here -->
</div>
</nav>
Set the initial value in your controller:
$scope.navbarCollapsed = true;
Edit:
New versions of ui-bootstrap prefix all compontents. Adjust your code accordingly eg. collapse -> uib-collapse.
My particular issue revolved around scope. I'm using ng-repeat to loop through my menu items so navbarCollapsed wasn't accessable in the ng-repeat child scope.
The resolution was to access the parent scope's variables. Simple as:
ng-click="$parent.navbarCollapsed = !$parent.navbarCollapsed"
Hope this helps anybody having the same issue.
I've created a JSFiddle with a dropdown navbar using angular-ui-boostrap's module "ui.bootstrap.dropdownToggle": http://jsfiddle.net/mhu23/2pmz5/
<div class="navbar navbar-fixed-top">
<div class="navbar-inner">
<div class="container"> <a class="brand" href="#">
My Responsive NavBar
</a>
<ul class="nav">
<li class="divider-vertical"></li>
<li class="dropdown"> <a href="#" class="dropdown-toggle">
Menu 1 <b class="caret"></b>
</a>
<ul class="dropdown-menu">
<li>Entry 1
</li>
<li>Entry 2
</li>
</ul>
</li>
....
</ul>
</div>
</div>
</div>
As far as I understand this is the proper, angular kind of way to implement such a dropdown menu. The "wrong" way, in terms of angularjs, would be to include bootstrap.js and to use "data-toggle="dropdown"... Am I right here?
Now I'd like to add responsive behaviour to my navbar as done in the following Fiddle:
http://jsfiddle.net/ghtC9/6/
BUT, there's something I don't like about the above solution. The guy included bootstrap.js!
So what would be the correct angular kind of way to add responsive behaviour to my existing navbar?
I obviously need to use bootstraps responsive navbar classes such as "nav-collapse collapse navbar-responsive-collapse". But I don't know how...
I'd really appreciate your help!
Thank you in advance!
Michael
Update 2015-06
Based on antoinepairet's comment/example:
Using uib-collapse attribute provides animations: http://plnkr.co/edit/omyoOxYnCdWJP8ANmTc6?p=preview
<nav class="navbar navbar-default" role="navigation">
<div class="navbar-header">
<!-- note the ng-init and ng-click here: -->
<button type="button" class="navbar-toggle" ng-init="navCollapsed = true" ng-click="navCollapsed = !navCollapsed">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">Brand</a>
</div>
<div class="collapse navbar-collapse" uib-collapse="navCollapsed">
<ul class="nav navbar-nav">
...
</ul>
</div>
</nav>
Ancient..
I see that the question is framed around BS2, but I thought I'd pitch in with a solution for Bootstrap 3 using ng-class solution based on suggestions in ui.bootstrap issue 394:
The only variation from the official bootstrap example is the addition of ng- attributes noted by comments, below:
<nav class="navbar navbar-default" role="navigation">
<div class="navbar-header">
<!-- note the ng-init and ng-click here: -->
<button type="button" class="navbar-toggle" ng-init="navCollapsed = true" ng-click="navCollapsed = !navCollapsed">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">Brand</a>
</div>
<!-- note the ng-class here -->
<div class="collapse navbar-collapse" ng-class="{'in':!navCollapsed}">
<ul class="nav navbar-nav">
...
Here is an updated working example: http://plnkr.co/edit/OlCCnbGlYWeO7Nxwfj5G?p=preview (hat tip Lars)
This seems to works for me in simple use cases, but you'll note in the example that the second dropdown is cut off.
You can do it using the "collapse" directive: http://jsfiddle.net/iscrow/Es4L3/
(check the two "Note" in the HTML).
<!-- Note: set the initial collapsed state and change it when clicking -->
<a ng-init="navCollapsed = true" ng-click="navCollapsed = !navCollapsed" class="btn btn-navbar">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</a>
<a class="brand" href="#">Title</a>
<!-- Note: use "collapse" here. The original "data-" settings are not needed anymore. -->
<div collapse="navCollapsed" class="nav-collapse collapse navbar-responsive-collapse">
<ul class="nav">
That is, you need to store the collapsed state in a variable, and changing the collapsed also by (simply) changing the value of that variable.
Release 0.14 added a uib- prefix to components:
https://github.com/angular-ui/bootstrap/wiki/Migration-guide-for-prefixes
Change: collapse to uib-collapse.
Not sure if anyone is having the same responsive issue, but it was just a simple css solution for me.
same example
... ng-init="isCollapsed = true" ng-click="isCollapsed = !isCollapsed"> ...
... div collapse="isCollapsed"> ...
with
#media screen and (min-width: 768px) {
.collapse{
display: block !important;
}
}
My solotion for responsive/dropdown navbar with angular-ui bootstrap (when update to angular 1.5 and, ui-bootrap 1.2.1)
index.html
...
<link rel="stylesheet" href="/css/app.css">
</head>
<body>
<nav class="navbar navbar-inverse navbar-fixed-top">
<div class="container">
<input type="checkbox" id="navbar-toggle-cbox">
<div class="navbar-header">
<label for="navbar-toggle-cbox" class="navbar-toggle"
ng-init="navCollapsed = true"
ng-click="navCollapsed = !navCollapsed"
aria-controls="navbar">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</label>
<a class="navbar-brand" href="#">Project name</a>
<div id="navbar" class="collapse navbar-collapse" ng-class="{'in':!navCollapsed}">
<ul class="nav navbar-nav">
<li class="active">Home</li>
<li>About</li>
<li>Contact</li>
<li uib-dropdown>
</b>
<ul uib-dropdown-menu role="menu" aria-labelledby="split-button">
<li role="menuitem">Action</li>
<li role="menuitem">Another action</li>
</ul>
</li>
</ul>
</div>
</div>
</div>
</nav>
app.css
/* show the collapse when navbar toggle is checked */
#navbar-toggle-cbox:checked ~ .collapse {
display: block;
}
/* the checkbox used only internally; don't display it */
#navbar-toggle-cbox {
display:none
}