Navbar works but clicked element not highlighted - angularjs

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;

Related

How to create collapsible navigation menu in angularJS apps?

I am very new to AngularJS and have a menu such as Home/Customer/Account/Other using
the bootstrap navbar component such as
<div class="navbar navbar-default navbar-inner navbar-inverse">
<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>
</div>
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li data-ng-class="{'active':highlight('/home')}"
style="margin-left:1px;">
Home
</li>
<li data-ng-class="{'active':highlight('/customer')}" style="margin-left:1px;">
Customer
</li>
</ul>
</div>
</div>
Once I shrink the window, I get to see the sandwich button. Now, If I click say, Customer menu,I would like
to collapse the menu.
How can I do that? Please help me out.
$(document).ready(function () {
$("nav").find("li").on("click", "a", function () {
$('.navbar-collapse.in').collapse('hide');
});
});
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<nav class="navbar navbar-default" role="navigation">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1"> <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">Brand</a>
</div>
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav navbar-right">
<li class="active"><a data-toggle="collapse" data-target=".in" href="#sectionA">Page1</a>
</li>
<li><a data-toggle="collapse" data-target=".in" href="#sectionB">Page2 (with data-toggle attribute)</a>
</li>
<li>Page3 (without data attributes, just jQuery)
</li>
</ul>
</div>
</div>
</nav>
I'm assuming that you are looking to close your collapsible nav menu when you click any item in the menu. If that's the thing which you are looking for then try this one as you are using bootstrap
<div class="navbar-nav" data-target=".navbar-collapse" data-toggle="collapse">
<a class="nav-item nav-link" href="#">Menu Item </a>
</div>
Bootstrap4
<li>
<a href="#" data-toggle="collapse" data-target=".navbar-
collapse.show">Products</a>
</li>
Using jQuery for bootstrap4
$(document).on('click','.navbar-collapse.show',function(e) {
$(this).collapse('hide');
});

how to update navbar in header in angularjs

I have an issue with my navbar updating...After login with my credentials my navbar is not updating..however my response is success..but how to update change my header..it have to show logout after login..Her is my Html code.How to write authentication for this..Please help me out.I am at end of my project..
<div ng-controller="NavbarCtrl" class="navbar navbar-default navbar-static-top" id="header">
<div class="container">
<div class="navbar-header">
<button type="button" data-toggle="collapse" data-target="#navbar" class="navbar-toggle collapsed">
<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="#/"><i class="ion-ios7-pulse-strong">Onio</i><img src="images/onio1.png"/></a>
</div>
<div id="navbar" class="navbar-collapse collapse">
<ul ng-if="isAuthenticated()" class="nav navbar-nav">
<li>Home</li>
<li >About</li>
<li >Products</li>
</ul>
<ul ng-if="!isAuthenticated()" class="nav navbar-nav pull-left">
<li>Home</li>
<li >About</li>
</ul>
<ul ng-if="!isAuthenticated()" class="nav navbar-nav pull-right">
<li>Login</li>
<li>Sign up</li>
</ul>
<ul ng-if="isAuthenticated()" class="nav navbar-nav pull-right">
<li>Logout</li>
<li><a href="#" data-toggle="dropdown" class="navbar-avatar dropdown-toggle">Welcome, {{userInfo}}
</a></li>
</ul>
<!--<ul ng-if="!isAuthenticated()" class="nav navbar-nav pull-right">-->
<!--<!–<li><button class="btn btn-facebook" ng-click="fbLogoutUser()">FBLogOut</button></li>–>-->
<!--<li class="fb-login-button" data-max-rows="1" ng-click="FBLogin()" data-size="large" data-show-faces="false"> </li>-->
<!--</ul>-->
</div>
</div>

Collapsing 'Non-Link' items in Twitter Bootstrap 3 Responsive Navbar

I have a responsive fixed-top navbar (using Twitter Bootstrap 3) as follows:
<div class="navbar navbar-inverse navbar-fixed-top" role="navigation">
<div class="container">
<div class="navbar-header"><img src="/images/citylightslogo.png" alt="logo" id="cllogo"/>
</div>
**<h1 id="topline2">• Tagline1 </h1>
<h1 id="topline3">• Address • Call Anytime! xxx xxx xxxx </h1>
<div id="adspace" >
<h1 id="headline33" class =".visible-xs" >100% Satisfaction Guaranteed! Call us Anytime! </h1>
</div>
<div id="logospace"><img src="/images/ab2.gif" alt="logo" id="alogo2"/><img src="/images/ab2.gif" alt="logo" id="alogo3"/>
</div>**
</div>
</div>
I just want to make sure that I am learning this correctly: Currently, the elements in bold above overflow all over the place (into other rows) when collapsed.
Question: How could I make sure that they are either invisible when collapsed or partially visible in mobile or tablet screens when collapsed?
Is the fact that I am not including those elements in the "navabar-header" class the problem or should I be wrapping them in a separate div to begin with (if so what div?)?
It seems the bootstrap docs are focused on explaining how to make navbar links responsive and I cannot seem to find anything on making non-link content (like headers) responsive as well.
Thanks!
Dont understand the goal entirely but let me take a crack at it... It sounds like you want more than just menu items to collapse...Right? Great! See below
--> http://www.bootply.com/118940
<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" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
<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>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
<li class="active">Link</li>
<li>Link</li>
<li class="dropdown">
Dropdown <b class="caret"></b>
<ul class="dropdown-menu">
<li>Action</li>
<li>Another action</li>
<li>Something else here</li>
<li class="divider"></li>
<li>Separated link</li>
<li class="divider"></li>
<li>One more separated link</li>
</ul>
</li>
</ul>
<div class="col-sm-3 col-md-3">
<form class="navbar-form" role="search">
<div class="input-group">
<input type="text" class="form-control" placeholder="Search" name="q">
<div class="input-group-btn">
<button class="btn btn-default" type="submit"><i class="glyphicon glyphicon-search"></i></button>
</div>
</div>
</form>
</div>
<ul class="nav navbar-nav navbar-right">
<li>Link</li>
<li class="dropdown">
Dropdown <b class="caret"></b>
<ul class="dropdown-menu">
<li>Action</li>
<li>Another action</li>
<li>Something else here</li>
<li class="divider"></li>
<li>Separated link</li>
</ul>
</li>
</ul>
</div><!-- /.navbar-collapse -->
</nav>
everything inside of
class="collapse navbar-collapse"
will collapse...
see it here --> http://www.bootply.com/118940

Toggle button is not working with AngularJS and Angular ui Bootsrap

The toggle button appears but it is not working. I've got a same code now in online as well and it is not working but in Plunker it is working.
Plunker - toggle button is working
Same code online - button is not working
And the code is:
<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>
<div class="nalogo-wrapper">
<img class="img-responsive" src="http://placehold.it/50x50&text=Logo" />
</div>
</div>
<div class="collapse navbar-collapse">
<ul class="nav navbar-nav">
<li><span class="glyphicon glyphicon-home"></span> Etusivu</li>
<li>Palvelut</li>
<li>Yhteistiedot</li>
</ul>
</div><!--/.nav-collapse -->
</div>
</div>
<div id="main">
<div ng-view>
</div>
</div>
Thanks for help!
Sami
I just copied this out of a working project where I used angular-ui bootstrap:
<div class="navbar navbar-inverse navbar-fixed-top" role="navigation">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle btn navbar-btn" 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="/#">Bake-Off</a>
</div>
<div collapse="navCollapsed" class="navbar-collapse collapse navbar-responsive-collapse">
<ul class="nav navbar-nav">
<li><a href="#" >Link 1</a></li>
<li><a href="#" >Link 2</a></li>
<li></li>
</ul>
<div class="container navbar-form navbar-right">
</div>
</div>
<!--/.navbar-collapse -->
</div>
</div>
You must make some changes to your navbar to accomodate the collapse directive of Angular UI-Bootstrap. I wondered about this myself not so long ago, the question was already asked and answered over here:
Responsive dropdown navbar with angular-ui bootstrap (done in the correct angular kind of way)
Adding an alternative solution to the answer of Josh C, just changing the collapse to uib-collapse, based on the latest documentation
https://angular-ui.github.io/bootstrap/#!#collapse
<div class="navbar navbar-inverse navbar-fixed-top" role="navigation">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle btn navbar-btn" 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="/#">Bake-Off</a>
</div>
<div uib-collapse="navCollapsed" class="navbar-collapse collapse navbar-responsive-collapse">
<ul class="nav navbar-nav">
<li><a href="#" >Link 1</a></li>
<li><a href="#" >Link 2</a></li>
<li></li>
</ul>
<div class="container navbar-form navbar-right">
</div>
</div>
<!--/.navbar-collapse -->
</div>
</div>

Two navbars same row make collapse not work. How to make right nav disappear?

I'm trying to get my navbar to collapse correctly. I have three links on the right that should disappear when my navbar collapses. Instead, they overlay the links I want to appear upon collapse. Any suggestions?
Here is my code:
<div class="navbar navbar-default navbar-fixed-top" role="navigation">
<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>
XYZ
</div>
<div class="collapse navbar-collapse navbar-ex1-collapse">
<ul class="nav navbar-nav pull-left">
<li>Home</li>
<li>Projects</li>
<li>Finance</li>
<li>Resume</li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li> </li>
<li></li>
<li></li>
</ul>
</div>
</div>
####UPDATED CODE, but icons collapse on new row overlaying content #######
<div class="navbar navbar-default navbar-fixed-top" role="navigation">
<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>
<a><img src="img/lior.jpeg">
</div>
<div class="collapse navbar-collapse navbar-ex1-collapse">
<ul class="nav navbar-nav">
<li>Home</li>
<li>Projects</li>
<li>Finance</li>
<li>Resume</li>
</ul>
<div style="float:right">
<ul class="nav navbar-nav navbar-right hidden-xs hidden-md">
<li></li>
<li></li>
<li></li>
</ul>
</div>
</div>
</div>
The easiest way seem to use the http://getbootstrap.com/css/#responsive-utilities.
For your right navigation (icons) use:
<ul class="nav navbar-nav navbar-right hidden-xs hidden-md">
This will hide the icons when the navbar has been collapsed.
Also read: Bootstrap 3 Multiple Nav bar Menus

Resources