How do i go to homepage with a click event in angularjs? - css

Question

I have 3 tabs which are created using li...when I click cancel in addform tab I must redirected to home page..But the add form tab is highlighted even it is redirected to homepage.I want to redirect to home page and home tab must be redirected.I am unable how to do it on click event..
My code is mentioned below :
//when cancel button is clicked
$scope.cancelbtn=function(){
$window.location.href="#Home"
ngDialog.closeAll();
};
//html
<div id="header">
<div id="header_name" style="padding-top:25px"><center><h1 class="hh"><a>Dynamic Creation of Forms</a></h1></center></div>
<div id="nav-masthead" role="navigation">
<ul style="padding-top: 38px;padding-left:113px">
<li >
<span class="glyphicon glyphicon-home">Home</span>
</li>
<li>
<span class=" glyphicon glyphicon-plus-sign ">Add Form</span>
</li>
<li>
View Form
</li>
</ul>
</div>
</div>
<div style="color:#0d7dc1;padding: 51px;padding-left: 120px;"><ng-view></ng-view></div>
//css
#header {
background-image: url(//www.drupal.org/sites/all/themes/bluecheese/images/sprites-horizontal.png);
background-color: #56b3e6;
height:141px;
background-position: 0 -1088px;
}
.hh{
margin-top:0;
}
#nav-header {
overflow:hidden;
font-size:0.923076em;
min-height:1.5em;
}
#header_name a{
background-position: 0 -467px;
background-repeat: no-repeat;
color:white;
text-decoration:none;
height: 63px;
overflow: hidden;
text-indent: -999em;
width: 181px;
}
#nav-masthead{
width:100%;
float:right;
margin-right: 0;
display: inline;
position: relative;
z-index: 1;
min-height: 0.69231em;
}
ul{
list-style: none;
font: inherit;
font-size: 100%;
}
#nav-masthead ul li{
list-style: none;
float: left;
font-size: 0.923076em;
margin-right: 0.615384em;
}
#nav-masthead ul li a {
background-color: #0d7dc1;
border-radius: 10px 10px 0 0;
color: white;
float: left;
padding: 0.416666em .75em 0.416666em 0.615384em;
text-decoration: none;
}
#nav-masthead ul li:hover a {
background-color: white;
color:black;
}
#nav-masthead li a.col {
color: black;
background-color: white;
}
//script
$(document).ready(function() {
$('#nav-masthead li a').click(function() {
$('#nav-masthead li a').removeClass("col");
$(this).addClass("col");
});
});
Can anyone solve this.When I redirected to home page I need to get home highlighted instead of add form.

Answer 1

reference: How to set bootstrap navbar active class with Angular JS?
essentially if you have a MainCtrl that encapsulates everything you'll be able to keep track of which active state is currently being active.
angular.module('app').controller('MainCtrl', ['$scope', '$location', function($scope, $location) {
$scope.isActive = function('viewLocation') { //pass in the current location
return viewLocation === $location.path(); //class becomes active if the pathing is corret
}
}]);
and then have your html include the ng-class calling that function
<li ng-class="{ active: isActive('/home')}">
<span class="glyphicon glyphicon-home">Home</span>
</li>
<li ng-class="{ active: isActive('/add')}">
<span class=" glyphicon glyphicon-plus-sign ">Add Form</span>
</li>
<li ng-class="{ active: isActive('/view')}">
View Form
</li>
unless I'm miss understanding your question, hope it helps.

Answer 2

I have got the answer ..Just to redirect to home page when click eventi have just used the below code.
$scope.cancelbtn=function(){
$('#home').trigger('click');
ngDialog.closeAll();
};
By using above code i have solved it.i am posting my answer because it may helpful to others.
Thank You.