Set class "active" on a link clicked

6,370 views
Skip to first unread message

wingy

unread,
Jul 26, 2012, 11:50:03 AM7/26/12
to ang...@googlegroups.com
I have a navigation bar with two page links.

              <li id="items" class="active"><a href="#/items">
                <i class="icon-shopping-cart"></i>
                Items
              </a></li>
              <li id="sellers"><a href="#/sellers">
                <i class="icon-home"></i>
                Sellers
              </a></li>

I need to have the class "active" on the one that is clicked so that it's visible which page is the active one.

Is there a way to do this with Angular without using jQuery?

Wingy

Peter Bacon Darwin

unread,
Jul 26, 2012, 12:12:39 PM7/26/12
to ang...@googlegroups.com

This is exactly what angular is for. Firstly, are your links static or will they be generated via ng-repeat ?
Basically you can expose the $routeparams onto the scope then use this with ng-class to set active on the li when the route matches.

Pete
...from my mobile.

--
You received this message because you are subscribed to the Google Groups "AngularJS" group.
To view this discussion on the web visit https://groups.google.com/d/msg/angular/-/gQJvlIjWUicJ.
To post to this group, send email to ang...@googlegroups.com.
To unsubscribe from this group, send email to angular+u...@googlegroups.com.
For more options, visit this group at http://groups.google.com/group/angular?hl=en.

wingy

unread,
Jul 26, 2012, 12:42:09 PM7/26/12
to ang...@googlegroups.com
I get what you are saying.

I have this in my "li" elements:

    <li ng-class="{active: currentUrlPath == '#/items'}"><a href="#/items">...
    <li ng-class="{active: currentUrlPath == '#/sellers'}"><a href="#/sellers">...

But how do I check what the current url path is?

Wingy
To unsubscribe from this group, send email to angular+unsubscribe@googlegroups.com.

wingy

unread,
Jul 26, 2012, 12:43:40 PM7/26/12
to ang...@googlegroups.com
Btw they are static.


On Thursday, July 26, 2012 6:12:39 PM UTC+2, Peter Bacon Darwin wrote:
To unsubscribe from this group, send email to angular+unsubscribe@googlegroups.com.

Peter Bacon Darwin

unread,
Jul 26, 2012, 3:22:08 PM7/26/12
to ang...@googlegroups.com
$location.path() or if you are using routes you can set up a value in them and access them via $routeParams.
In either case you need to expose these to the scope, so in a relevant controller you would have:

module.controller('MyCtrl', ['$scope', '$location', function($scope, $location) {
  $scope.currentUrl = $location.path;
}]);

Then in the html:
<ul ng-controller="MyCtrl">
    <li ng-class="{active: currentUrl() == '#/items'}"><a href="#/items">...
    <li ng-class="{active: currentUrl() == '#/sellers'}"><a href="#/sellers">...
</ul>


To view this discussion on the web visit https://groups.google.com/d/msg/angular/-/aibTvintd4YJ.

To post to this group, send email to ang...@googlegroups.com.
To unsubscribe from this group, send email to angular+u...@googlegroups.com.

wingy

unread,
Jul 26, 2012, 5:23:07 PM7/26/12
to ang...@googlegroups.com
One issue leads to another.

I get your implementation. But here is the thing.

Here is a stripped down version of my HTML template:

<!DOCTYPE html>
<html lang="en" ng-app="myapp">
  <head>
    <link rel="stylesheet" href="css/bootstrap.min.css">
  </head>
  <body>
    <div class="navbar navbar-fixed-top">
      ...
            <ul class="nav">
              <li ng-class="{active: currentPath() == '/items'}"><a href="#/items">
                <i class="icon-shopping-cart"></i>
                Items
              </a></li>
              <li ng-class="{active: currentPath() == '/sellers'}"><a href="#/sellers">
                <i class="icon-home"></i>
                Sellers
              </a></li>
      ...
    <div class="container">
      <div ng-view></div>
    </div>

    <script src="lib/jquery/jquery.min.js"></script>
    <script src="lib/angular/angular.min.js"></script>
    <script src="lib/angular/angular-resource.min.js"></script>
    <script src="js/main.js"></script>
  </body>
</html>

As you can see I have a myapp module that acts like a router coupling my controllers with my views (served in ng-view).

This makes whatever I put in the scope of the controller out of reach for the list items needing "currentPath".

So I thought I could define a global app controller in body like this:

  <body ng-controller="AppCtrl">

But that gave me an error saying that AppCtrl doesn't exist, even though I have put one in my main.js script (loaded at the bottom of the HTML template).

Do you know how I could have an app controller creating a scope for the whole document?

Wingy

am...@userworkstech.com

unread,
Oct 15, 2012, 5:19:10 AM10/15/12
to ang...@googlegroups.com, johnn...@yobistore.com
<script>
jQuery(document).ready(function(){
    jQuery('#link1').click(function(){
        jQuery('#link1').addClass('active');
    }); 
    jQuery('#link2').click(function(){
        jQuery(this).addClass('active');
    });
    jQuery('#link3').click(function(){
        jQuery(this).addClass('active');
    });
    jQuery('#link4').click(function(){
        jQuery(this).addClass('active');
    });  
});
</script>
<div id="pageHeader">
    <div class="logo">
        <img alt="Logo" src="/themes/bartik/images/logo.gif" /></div>
    <div id="pageNav">
        <div class="menu">
            <ul>
                <li>
                    <a href="/" id="link1">HOME</a></li>
                <li>
                    <a href="/about_us" id="link2">ABOUT US</a></li>
                <li>
                    <a href="#" id="link3">OUR CLIENTS</a></li>
                <li>
                    <a href="#" id="link4">CONTACT</a></li>
            </ul>
        </div>
    </div>
</div>
Reply all
Reply to author
Forward
0 new messages