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

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 >
                                <a href="#/Home"><span class="glyphicon glyphicon-home">Home</span></a>
                            </li>
                            <li>
                                <a href="#/Add"><span class=" glyphicon glyphicon-plus-sign ">Add Form</span></a>
                            </li>
                            <li>
                                <a href="#/View">View Form</a>
                            </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.

on click event you can set active class or if you are using angular routing then there is resolve property to set initial values there you set you class value is active so that you can achieve that. — Jayant Patil, Nov 04 '15 at 04:42
I dont how to do it.so only i posted the question...but i have seen this statement on click $('.nav-tabs > .active').next('li').find('a').trigger('click'); but dont know how to use and active the class — Vindya Veer, Nov 04 '15 at 04:48

score 0 · Answer 1 · edited May 23 '17 at 12:29

0

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')}">
                                <a href="#/Home"><span class="glyphicon glyphicon-home">Home</span></a>
                            </li>
                            <li ng-class="{ active: isActive('/add')}">
                                <a href="#/Add"><span class=" glyphicon glyphicon-plus-sign ">Add Form</span></a>
                            </li>
                            <li ng-class="{ active: isActive('/view')}">
                                <a href="#/View">View Form</a>
                            </li>

unless I'm miss understanding your question, hope it helps.

edited May 23 '17 at 12:29

Community

1
1

answered Nov 04 '15 at 04:55

Andrei

1,196
1
11
25

if you just need to change locations (after I re-read you're question) all you need to do is have the $location injected correctly and give it the path using the $location.path('/home'); method. – Andrei Nov 04 '15 at 04:57
But in main controller i have config the routeprovider – Vindya Veer Nov 04 '15 at 05:02
app.config(function($routeProvider){ $routeProvider.when("/Home", { templateUrl:"Htmlfiles/Home.html" }) .when("/Add", { templateUrl:"Htmlfiles/AddForm.html", controller:"addform" }) .when("/View", { templateUrl:"Htmlfiles/ViewForm.html", controller:"viewcontroller" }); $routeProvider.otherwise({ templateUrl:"Htmlfiles/Home.html" }); }); – Vindya Veer Nov 04 '15 at 05:02
perhaps there is something I am missing, isn't the problem about having a li element with the active class? or are you not able to re-direct to the /home location. or is it something else? – Andrei Nov 04 '15 at 05:10
I mean when i use $window.location.href="#home" i am redirecting to home page from add form page when cancel button is click on the popup.But the add from is active.I need home to be active..so i have given u the css code in the question. – Vindya Veer Nov 04 '15 at 05:18

score 0 · Answer 2 · answered Nov 04 '15 at 06:13

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.

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

2 Answers2