CODEWITHSUNDEEP
javascriptcssangularjsangular-ui-routerangularjs-routing
ksernow
ksernow

Reputation: 714

ui-sref-active on multiple states

I want the ui-sref-active to be active on on multiple states. This is what I have

 <a ui-sref-active="active"  ui-sref="first"><span>1</span> test1</a>
 <a ui-sref-active="active"  ui-sref="fourth"><span>2</span> test2</a>

As you can see test1 will be active when the state is first and test2 will be active when state is fourth. But I want test1 to be active for second and third state as well. How do I do it?

Upvotes: 1

Views: 760

Answers (1)

scipper
scipper

Reputation: 3153

I would recomment to use the includedByState filter. 

<a ui-sref="first" ng-class="{active: ('first' | includedByState) || ('second' | includedByState) || ('third' | includedByState)}">
  <span>1</span> test1
</a>
<a ui-sref-active="active" ui-sref="fourth">
  <span>2</span> test2
</a>

This will produce some code but does what you want.

Alternatively you could create a function in your component, that handles the logic:

//component function
activateTest() {
  return $filter('includedByState')('first') || 
    $filter('includedByState')('second') || 
    $filter('includedByState')('third');
}

//html
<a ui-sref="first" ng-class="{active: $ctrl.activateTest()}">
  <span>1</span> test1
</a>

This should also do the trick.

Upvotes: 2

Related Questions