I want to highlight currently selected menu item with AngularJS. I have this HTML:
<li ng-repeat="m in menuLinks">
<a ng-class="{active : isActive('{{m.url}}')}" href="{{m.url}}" active-link="active" onclick="closeMenu()">{{m.title}}</a>
</li>
And this in the controller:
$scope.isActive = function (viewLocation) {
alert(viewLocation);
if ($location.path().indexOf(viewLocation) === 0) {
return true;
} else {
return false;
}
};
The function isActive() gets called because alerts show up, but when I inspect the elements I get this:
<a class="ng-binding" ng-class="{active : isActive('/#/sessions')}" href="/#/sessions" active-link="active" onclick="closeMenu()">Sessions</a>
What am I missing here?
You don't need the expression in ng-class, just use it like this:
<a ng-class="{active : isActive(m.url)}" ng-href="{{m.url}}" active-link="active" ng-click="closeMenu()">{{m.title}}</a>
and I recommend using ng-href instead of just href and ng-click instead of onclick ;)
Collected from the Internet
Please contact [email protected] to delete if infringement.
Comments