Active menu item in Angular?

Question

Angular

How to correctly assign a class to the active menu item in Angular?

Answer 1

Here is the code for the standard ngRoute

<ul>
    <li ng-repeat="link in menu" ng-class="{ active: isActive(\'{{ link.href }}\') }">
        <a ng-href="{{ link.href }}" href="">{{ link.title }}</a>
    </li>
</ul>

The following services need to be injected into the controller: $scope, $location

$scope.menu = [{
    "title": "title1",
    "href": "href1"
}, {
    "title": "title2",
    "href": "href2"
}, {
    "title": "title3",
    "href": "href3"
}];

$scope.isActive(location) {
    return location === $location.path()
}

The logic is this: with nrRepeat, you knock on the isActive function each time, passing it the link that is used in the menu as an argument. The function checks the current url against the one you passed to it and returns true or false. Next, ngClass substitutes the active class where the isActive function returned true.

Answer 2

If ui-router and the menu item (or within it) has a ui-sref, then ui-sref-active="desired_class"