How to toggle ng-class in angularjs

Question

Now I want to toggle class with ng-class, but now I am stuck with tab which has sub <a>. Here is Html

<ul class="nav navbar-nav navbar-right">
    <li ng-class="{active:isActive('/home')}"><a ui-sref='home'>Home</a>
    </li>
    <li ng-class="{active:isActive('/ebin'||'/reports')}" class="dropdown"><a href="" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false">Expenses<span class="caret"></span></a>

        <ul class="dropdown-menu" role="menu">
            <li><a ui-sref='ebin'>My Expenses</a>
            </li>
            <li><a ui-sref='reports'>Expense Reports</a>
            </li>
        </ul>
    </li>
    <li ng-class="{active:isActive('/settings')}"><a ui-sref='settings' translate="SETTINGS">Settings</a>
    </li>
</ul>

JS part:

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

The issue I have here is the ng-class only work for /home and /setting, but doesn't work for dropdown menu. any Idea?

Karthik · Accepted Answer · 2015-01-06 20:03:22Z

1

The issue is with the parameter you are passing "isActive('/ebin'||'/reports')". This is not a valid string.

What you could do is this:

   ng-class="{'active':isActive('/ebin'), 'active':isActive('/reports')}"

answered Jan 6, 2015 at 20:03

Karthik

1,3776 silver badges8 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

linyuanxie Over a year ago

I did try your way, but when you change from ebin to reports or from reports to ebin, the active class will be gone.

Collectives™ on Stack Overflow

How to toggle ng-class in angularjs

1 Answer 1

1 Comment

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Related