CODEWITHSUNDEEP
angularjsangular-ui-router
realph
realph

Reputation: 4671

Angular: Add .active Class Based on Current State

I'm trying to add an .active class to my navigation tabs based on the current state, but because the state has an :id, it's adding that class of active to multiple tabs.

My state looks like so:

$stateProvider
  .state('genre', {
      url: "/movie/genre/:id",
      templateUrl: "views/movie/genre.html",
  });

And I'm using ui-sref and ui-sref-active on my markup like this:

<li ui-sref="genre" ui-sref-active="active">
    <a href="#/movie/genre/horror">Horror</a>
</li>
<li ui-sref="genre" ui-sref-active="active">
    <a href="#/movie/genre/romance">Horror</a>
</li>
...

So despite being on site.com/movie/genre/horror, I'm getting the .active class on both tabs, rather than just the horror page.

Any help with this is appreciated.

Thanks in advance!

Upvotes: 1

Views: 849

Answers (2)

Paul Georg Podlech
Paul Georg Podlech

Reputation: 530

The class is applied to your active state. Your state is 'genre', which is active for both your ui-sref attributes.

I made a plunkr which should work for you here.

<li ui-sref-active="active">
  <a ui-sref="genre({id: 'horror'})">Horror</a>
</li>
<li ui-sref-active="active">
  <a ui-sref="genre({id: 'romance'})">romance</a>
</li>

Upvotes: 3

JanisP
JanisP

Reputation: 1243

You don't have to use href, you have to use ui-router states for navigation. In this case you have to pass arguments in your ui-sref. And just get rid of href.

ui-sref="genre({id:'horror'})"

Upvotes: 0

Related Questions