Search code examples
javascriptangularjsangular-ui-routerng-class

Active child state stays active when it shouldn't using ng-class and ui-router

My current working on nested states (with many nested states) using ui-router and can get the state to change to an active state using ng-class like so

ng-class="{active:$state.includes('sidemenu.parent.child<1-3>')}"

however id like add multiple states to the active class and achive this like so

`ng-class="{active:[$state.includes('sidemenu.parent.child1'),$state.includes('sidemenu.parent.grandchild1')]}"

and it works, however when I click out of the state it stays active. I created this codepen. It looks like so.

enter image description here

enter image description here

enter image description here

Id like it if the child1 tab isnt active while in the child2 and child3 states.

Solution

  • Just curious, where did you get the following syntax

    ng-class="{active:[$state.includes('sidemenu.parent.child1'),$state.includes('sidemenu.parent.grandchild1')]}"

    If you change the value of the ng-class above to the following, it should achieve what you're looking for, i hope.

    {active:$state.includes('sidemenu.parent.child1') ||  $state.includes('sidemenu.parent.grandchild1')}