drozzy drozzy - 1 year ago 125
AngularJS Question

How to highlight a current menu item?

Does AngularJS help in any way with setting an

class on the link for the current page?

I imagine there is some magical way this is done, but I can't seem to find.

My menu looks like:

<li><a class="active" href="/tasks">Tasks</a>
<li><a href="/actions">Tasks</a>

and I have controllers for each of them in my routes:

But I can't figure out a way to bind the "active" class on the
links to the controllers.

Any hints?

Answer Source

on view

<a ng-class="getClass('/tasks')" href="/tasks">Tasks</a>

on controller

$scope.getClass = function (path) {
  return ($location.path().substr(0, path.length) === path) ? 'active' : '';

With this the tasks link will have the active class in any url that starts with '/tasks'(e.g. '/tasks/1/reports')

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download