angular.js - How to change the button style after angular routing?

Question

As mentioned, I want to change the style of the button after routing, that is, after clicking the about link, the active class should disappear from the API and be transferred to about.

But I don’t want to implement it through dom (it feels like I’m still using jquery to solve the problem). May I ask how to achieve elegance in Angular?

<ul class="nav navbar-nav">
     <li class="active"><a href="#/">API</a></li>
     <li><a ng-href="#/about">About</a></li>
</ul>

Answer 1

$scope.$state = $state;

<ul class="nav navbar-nav">
     <li ng-class="{'active': $state.current.name = 'main'}"><a href="#/">API</a></li>
     <li ng-class="{'active': $state.current.name = 'about'}"><a ng-href="#/about">About</a></li>
</ul>

Replace the route name above with the actual one

You can also use the ui-router command, refer to

Answer 2

You can use the ng-class instruction bool to determine, bind the click event and pass the $index of li.