Click on caret does not show li items - angularjs

Plnkr Link
JS Code
var id = 1;
if (id == 2) {
$scope.leftLinks = [{
Text: "Register",
Url: "/register"
}, {
Text: "Login",
Url: "/"
}];
}
else {
$scope.leftLinks =
[{
subMenus: [
{
Text: "Profile",
Url: "/profile"
},
{
Text: "Change Password",
Url: "/change-password"
},
{
Text: "Logout",
Url: "#"
}
]
}];
}
Markup
<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-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">
<div class="collapse navbar-collapse" uib-collapse="navCollapsed">
<ul class="nav navbar-nav navbar-right">
<li ng-repeat="leftLink in leftLinks">
{{leftLink.Text}}
{{leftLink.Text}}
<a href="javascript:void(0)" role="button" area-haspopup="true" area-expanded="false" uib-dropdown-toggle ng-show="leftLink.subMenus">Hello
<b class="caret"></b>
</a>
<ul class="dropdown-menu" role="menu" ng-show="leftLink.subMenus">
<li ng-repeat="subMenu in leftLink.subMenus">
{{subMenu.Text}}
</li>
</ul>
</li>
</ul>
</div>
</div>
</nav>
Problem
Click on Navbar and then click on Hello: It does not show the li items
Please suggest.

It's clear that you are using click event with bootstrap component which require bootstrap javascript files. You must include it. Then you have to add a trigger to your menu. I belive the menu should be something like that :
<div class="dropdown">
<a role="button" href="#" class="dropdown-toggle"
data-toggle="dropdown" >Hello <b class="caret"></b>
</a>
<ul class="dropdown-menu" role="menu" ng-show="true">
<li>
item 1
</li>
<li>
item 2
</li>
<li>
item 3
</li>
</ul>
That is a little Plunker figure out your problem plunker.
I hope that helps

Related

How to collapse menu with ui bootstrap dropdowns

I have the following menu:
<div class="collapse navbar-collapse" uib-collapse="isNavCollapsed">
<ul class="nav navbar-nav navbar-right">
<li ng-show="isAuthorized(['4TierWeb-Basic User'])">
<a id="home" class="{{selectedMenuTab === 'home' ? 'activeMenu' : ''}}" uib-tooltip="Home" tooltip-placement="bottom" tooltip-is-open="sortTooltipIsOpen5" ng-click="sortTooltipIsOpen5 = !sortTooltipIsOpen5 && isNavCollapsed = !isNavCollapsed" tooltip-enable="!dropdown.isopen5" role="button" aria-haspopup="true" aria-expanded="false" ui-sref="DashboardTemplate.Dashboard">
<span class="material-icons headerIcon home"></span>
</a>
</li>
<li uib-dropdown is-open="dropdown.isopen">
<a id="applicationdropdown" class="{{selectedMenuTab === 'applications' ? 'activeMenu' : ''}}" uib-tooltip="Applications" tooltip-placement="bottom" tooltip-is-open="sortTooltipIsOpen" ng-click="sortTooltipIsOpen = !sortTooltipIsOpen" tooltip-enable="!dropdown.isopen" role="button" aria-haspopup="true" aria-expanded="false" uib-dropdown-toggle>
<span class="material-icons headerIcon laptop"></span>
</a>
<ul uib-dropdown-menu aria-labelledby="applicationdropdown">
<li ng-repeat="item in applicationsMenu">
<a ng-show="item.enabled" ui-sref-active="activeMenu" ui-sref="{{item.route}}">
<span class="material-icons {{item.icon}}" ng-click="isNavCollapsed = !isNavCollapsed" style="margin-right: 2px;"></span>{{item.heading}}
</a>
</li>
</ul>
</li>
<li uib-dropdown is-open="dropdown.isopen3">
<a id="billingsdropdown" class="{{selectedMenuTab === 'billings' ? 'activeMenu' : ''}}" uib-tooltip="Billings" tooltip-placement="bottom" tooltip-is-open="sortTooltipIsOpen3" ng-click="sortTooltipIsOpen3 = !sortTooltipIsOpen3" tooltip-enable="!dropdown.isopen3" role="button" aria-haspopup="true" aria-expanded="false" uib-dropdown-toggle>
<span class="material-icons headerIcon monetization_on"></span>
</a>
<ul uib-dropdown-menu aria-labelledby="billingsdropdown">
<li ng-repeat="item in billingsMenu">
<a ng-show="item.enabled" ui-sref-active="activeMenu" ui-sref="{{item.route}}">
<span class="material-icons {{item.icon}}" ng-click="isNavCollapsed = !isNavCollapsed" style="margin-right: 2px;">
</span>{{item.heading}}
</a>
</li>
</ul>
</li>
<li uib-dropdown is-open="dropdown.isopen4">
<a id="settingsdropdown" class="{{selectedMenuTab === 'settings' ? 'activeMenu' : ''}}" uib-tooltip="Settings" tooltip-placement="bottom" tooltip-is-open="sortTooltipIsOpen4" ng-click="sortTooltipIsOpen4 = !sortTooltipIsOpen4" tooltip-enable="!dropdown.isopen4" role="button" aria-haspopup="true" aria-expanded="false" uib-dropdown-toggle>
<span class="material-icons headerIcon settings"></span>
</a>
<ul uib-dropdown-menu aria-labelledby="settingsdropdown">
<li ng-repeat="item in settingsMenu">
<a ng-show="item.enabled" ui-sref-active="activeMenu" ui-sref="{{item.route}}">
<span class="material-icons {{item.icon}}" ng-click="isNavCollapsed = !isNavCollapsed" style="margin-right: 2px;"></span>{{item.heading}}
</a>
</li>
</ul>
</li>
</ul>
</div>
At present, when you click a link it closes the dropdown, but not the entire hamburger, how can I close the menu all the way when somebody clicks a link?
I've tried setting the isNavCollapsed several different ways with no effect.
Partial underlying controller code:
$scope.isNavCollapsed = true;
$scope.settingsMenu = [
{
heading: 'Companies',
route: 'AdminTemplate.AdminTab.Company',
icon: 'business'
},
{
heading: 'User Admin',
route: 'AdminTemplate.AdminTab.UserAdministration',
icon: 'assignment_ind'
},
{
heading: 'User Profile',
route: 'AdminTemplate.AdminTab.UserProfile',
icon: 'account_circle'
}
];
Basically I'm feeding

Navbar works but clicked element not highlighted

I generated an AngularJS app with yeoman. The navbar works and when I click on the an element the enw page loads, however the clicked button don't get highlighted.
This is the navbar code
<div class="header">
<div class="navbar navbar-default" role="navigation">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#js-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="#!/">myApp</a>
</div>
<div class="collapse navbar-collapse" id="js-navbar-collapse">
<ul class="nav navbar-nav">
<li class="active">1</li>
<li><a ng-href="#!/page2">2</a></li>
<li><a ng-href="#!/page3">3</a></li>
<li><a ng-href="#!/page4">4</a></li>
<li><a ng-href="#!/page5">5</a></li>
<li><a ng-href="#!/page6">6</a></li>
</ul>
</div>
</div>
</div>
</div>
There are many ways you can do this. Here there is one of them
Create a controller and set a var called currentLink like this
//...
.controller('headerCtrl', function($scope){
$scope.currentLink = 1;
$scope.set = function(link){
$scope.currentLink = link;
}
});
//...
now in your html modify your code like this:
<div class="header" ng-controller="headerCtrl">
<!--...-->
<div class="collapse navbar-collapse" id="js-navbar-collapse">
<ul class="nav navbar-nav">
<li ng-class="{'active': currentLink == 1}">1</li>
<li ng-class="{'active': currentLink == 2}"><a ng-href="#!/page2" ng-click="headerCtrl.set(2);">2</a></li>
<li ng-class="{'active': currentLink == 3}" ><a ng-href="#!/page3" ng-click="headerCtrl.set(3);">3</a></li>
<li ng-class="{'active': currentLink == 4}"><a ng-href="#!/page4" ng-click="headerCtrl.set(4);">4</a></li>
<!-- and so on-->
</ul>
<!--...-->
</div>
This way with ng-class you switch from active or not every link and with ng-click you set that link as active when clicked;

navbar disappears but no dropdown

So been trying to set up a navbar that collapses to a drop down when the size is under a certain number of pixels. So far I have managed to make the normal menu disappear when it goes under a certain size, but once I make the window smaller and I have a icon to click (<a class="navbar-toggle">) nothing happens, well, if I look at the console, I get a "Clicked Link" on the console from chrome-extension dom.js but no drop down menu. Any idea what I am missing?
This is the menu (in ejs)
<div class="jumbotron cm_header">
<H1>Construct Mind - Internal</H1>
<div class="navbar-header">
<a class="navbar-toggle">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</a>
</div>
<div id="slidemenu">
<ul class="nav navbar-nav">
<li <%if (title == "Home") { %> class="cmh_active"<% } %>>Home</li>
<li <%if (title == "Whiteboard") { %> class="cmh_active"<% } %>>Whiteboard</li>
<li <%if (title == "Profile") { %> class="cmh_active"<% } %>><%if (user.updateMe) { %><i class="glyphicon glyphicon-exclamation-sign" ><% } %>Profile<%if (user.updateMe) { %></i><% } %></li>
<li <%if (title == "Addressbook") { %> class="cmh_active"<% } %>>Addressbook</li>
</ul>
<ul class="nav navbar-nav navbar-right login_move">
<li><i class="fa fa-user"> Logout</i></li>
</ul>
</div>
</div>
</div>
</nav>
CSS is loaded, and the following javascript libraries are loaded:
<link href="/bower_components/bootstrap/dist/css/bootstrap.min.css" rel="stylesheet">
... code ...
<script src="/bower_components/jquery/dist/jquery.min.js"></script>
<script src="/bower_components/bootstrap/dist/js/bootstrap.min.js"></script>
<script src="/bower_components/angular/angular.js"></script>
<script src="/bower_components/ngDialog/js/ngDialog.min.js"></script>
<script src="/javascripts/cmInternal.js"></script>
This is built into bootstrap already. Viewing the html for bootstrap.com I see their button looks like this:
<button class="navbar-toggle collapsed" type="button" data-toggle="collapse" data-target="#bs-navbar" aria-controls="bs-navbar" aria-expanded="false">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
with the button they have data-target="#bs-navbar".
"#bs-navbar" refers to the ID on their "nav" element
<nav id="bs-navbar" class="collapse navbar-collapse">
<ul class="nav navbar-nav">
<li>
Getting started
</li>
<li>
CSS
</li>
<li>
Components
</li>
<li>
JavaScript
</li>
<li>
Customize
</li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li>Expo</li>
<li>Blog</li>
</ul>
</nav>
You just need to use that combination in your situation to get it to work.

How to combine navbar, dropdown and collapse in AngularStrap

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'
}
];

AngularJS with Bootstrap 3 navbar not collapsing on small device and hash tag links

So the problem comes when trying the project I'm working on the phone, the links I have inside my navbar are all with hash tag links (#) since it's AngularJS... Now I did find a way to make it to work perfectly in jQuery
$('.nav li a').not('.dropdown-toggle').on('click', function(){
$('.navbar-ex1-collapse').removeClass('in').addClass('collapse');
});
but since they always say to stop using plain jQuery or DOM manipulation...so how am I suppose to do this? I'm new to AngularJS and I'm not to good at starting to create my own directive, or should I just have $watch? but then how can I watch a certain class to be clicked then? I tried to do this example twitter-boostrap-navbar-with-angular-js-collapse-not-functioning but it was made specifically for Bootstrap 2.3 and some properties have changed too, so I'm getting a little confused. I could leave the jQuery, but you know...I'm trying to learn the proper way of doing... :)
Oh and if that help, my navbar Bootstrap 3 menu looks like this
<nav class="navbar navbar-default navbar-fixed-top" 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=".navbar-ex1-collapse">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse navbar-ex1-collapse">
<ul class="nav navbar-nav">
<li class="dropdown">
Portfolio<b class="caret"></b>
<ul class="dropdown-menu">
<li>Add</li>
<li>Undo</li>
<li>List</li>
</ul>
</li>
</ul>
</div><!-- /.navbar-collapse -->
</div><!-- /.container -->
</nav>
Probably a bit late, but here is a bootstrap 3.x version of the answer I gave in the question you referenced - http://jsfiddle.net/N99dQ/
This time, I have used ng-init instead of a controller, but both ways will work. Also worth mentioning, if you are not using the dropdowns, you'll only need to include ['ui.bootstrap.collapse']
HTML:
<nav id="navbar-example" class="navbar navbar-inverse navbar-static" role="navigation">
<div class="container-fluid">
<div class="navbar-header">
<button class="navbar-toggle" type="button" ng-init="isCollapsed = true" ng-click="isCollapsed = !isCollapsed">
<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</a>
</div>
<div collapse="isCollapsed" class="navbar-collapse bs-js-navbar-collapse">
<ul class="nav navbar-nav">
<li class="dropdown">
<a id="drop1" href="#" role="button" class="dropdown-toggle" data-toggle="dropdown">Dropdown <b class="caret"></b></a>
<ul class="dropdown-menu" role="menu" aria-labelledby="drop1">
<li role="presentation"><a role="menuitem" tabindex="-1" href="http://twitter.com/fat">Action</a></li>
<li role="presentation"><a role="menuitem" tabindex="-1" href="http://twitter.com/fat">Another action</a></li>
<li role="presentation"><a role="menuitem" tabindex="-1" href="http://twitter.com/fat">Something else here</a></li>
<li role="presentation" class="divider"></li>
<li role="presentation"><a role="menuitem" tabindex="-1" href="http://twitter.com/fat">Separated link</a></li>
</ul>
</li>
<li class="dropdown">
Dropdown 2 <b class="caret"></b>
<ul class="dropdown-menu" role="menu" aria-labelledby="drop2">
<li role="presentation"><a role="menuitem" tabindex="-1" href="http://twitter.com/fat">Action</a></li>
<li role="presentation"><a role="menuitem" tabindex="-1" href="http://twitter.com/fat">Another action</a></li>
<li role="presentation"><a role="menuitem" tabindex="-1" href="http://twitter.com/fat">Something else here</a></li>
<li role="presentation" class="divider"></li>
<li role="presentation"><a role="menuitem" tabindex="-1" href="http://twitter.com/fat">Separated link</a></li>
</ul>
</li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li id="fat-menu" class="dropdown">
Dropdown 3 <b class="caret"></b>
<ul class="dropdown-menu" role="menu" aria-labelledby="drop3">
<li role="presentation"><a role="menuitem" tabindex="-1" href="http://twitter.com/fat">Action</a></li>
<li role="presentation"><a role="menuitem" tabindex="-1" href="http://twitter.com/fat">Another action</a></li>
<li role="presentation"><a role="menuitem" tabindex="-1" href="http://twitter.com/fat">Something else here</a></li>
<li role="presentation" class="divider"></li>
<li role="presentation"><a role="menuitem" tabindex="-1" href="http://twitter.com/fat">Separated link</a></li>
</ul>
</li>
</ul>
</div><!-- /.nav-collapse -->
</div><!-- /.container-fluid -->
</nav>
Javascript:
var myApp = angular.module('myApp', ['ui.bootstrap']);
As an alternate to my previous answer, this one uses ng-repeat to condense the html. http://jsfiddle.net/m5TZw/
HTML
<div class="container-fluid">
<div class="navbar-header">
<button class="navbar-toggle" type="button" ng-click="isCollapsed = !isCollapsed">
<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</a>
</div>
<div collapse="isCollapsed" class="navbar-collapse bs-js-navbar-collapse">
<ul class="nav navbar-nav">
<li class="dropdown">
<a id="drop1" href="#" role="button" class="dropdown-toggle" data-toggle="dropdown">Dropdown <b class="caret"></b></a>
<ul class="dropdown-menu" role="menu" aria-labelledby="drop1">
<li ng-repeat="m in menu1" role="presentation"><a ng-click="go(m.link)" role="menuitem" tabindex="-1">{{m.text}}</a></li>
</ul>
</li>
<li class="dropdown">
Dropdown 2 <b class="caret"></b>
<ul class="dropdown-menu" role="menu" aria-labelledby="drop2">
<li ng-repeat="m in menu1" role="presentation"><a ng-click="go(m.link)" role="menuitem" tabindex="-1">{{m.text}}</a></li>
</ul>
</li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li id="fat-menu" class="dropdown">
Dropdown 3 <b class="caret"></b>
<ul class="dropdown-menu" role="menu" aria-labelledby="drop3">
<li ng-repeat="m in menu1" role="presentation"><a ng-click="go(m.link)" role="menuitem" tabindex="-1">{{m.text}}</a></li>
</ul>
</li>
</ul>
</div>
</div>
</nav>
JS
var myApp = angular.module('myApp', ['ui.bootstrap.collapse', 'ui.bootstrap.dropdownToggle']);
function NavBarCtrl($scope, $location) {
$scope.isCollapsed = true;
$scope.menu1 = [
{text: 'first', link : '/first'},
{text: 'second', link : '/second'},
{text: 'third', link : '/third'},
{text: 'fourth', link : '/fourth'},
{text: 'fifth', link : '/fifth'}
];
$scope.go = function(path) {
$scope.isCollapsed = true;
$location.path('#/' + path);
}
}
Rather importing a heavy "ui.bootstrap" I feel that this will be simple JS fix:
//for close, opened dropdown.
$(".nav a").click(function () {
if ($(".navbar-collapse").hasClass("in")) {
$('[data-toggle="collapse"]').click();
}
});
If this code is not working correctly then see that it's binding correctly, so place it in controller that loads page.

Resources