1

AngularJS

I have scenario of applying class based on a condition in which I'm storing the value in rootscope dynamically and evaluating in html angular expression but still not working

<li role="presentation" style="width:200px" ng-class="{active: true, inactive: false}[{{vm.$rootScope.currentPage}}==1]"><a href="#/create">Create</a></li>

In inspect element if I check I can see 1==1 but still class is not getting active and if I remove {{vm.$rootScope.currentPage}} and place 1 it is working

I tried this also

<li role="presentation" style="width:200px" ng-class="{'active':2=={{vm.$rootScope.currentPage}} }"><a href="#/include">include</a></li>

Same thing with this also I can see 2==2 but still not activating and if Istatically place 2==2 it is working

sudhir
  • 1,387
  • 3
  • 25
  • 43

1 Answers1

4

You're writing it wrong, do like this:

ng-class="{'active': true, 'inactive': false}

The class name first then the condition.

And for this:

ng-class="{'active': 2 === vm.$rootScope.currentPage}"

No extra brackets inside because it's already an expression.

Chrillewoodz
  • 27,055
  • 21
  • 92
  • 175
  • Not Working , ng-class="{active: 'true', inactive: 'false'}[1==1] -1st code in inspectElement , ng-class={'active':2===vm.$rootScope.currentPage }" – sudhir Apr 12 '16 at 13:47
  • Don't wrap your booleans in quotes. Do it the way I showed. – Chrillewoodz Apr 12 '16 at 13:58
  • ya even I removed quotes same output , problem is not with those expression is evaluated but some late binding happening I guess because when I statically place expression it's working – sudhir Apr 12 '16 at 14:06
  • Then that's a whole other question then, it seems like this one has been resolved. If you need help with the other thing too post a new question :) – Chrillewoodz Apr 12 '16 at 14:18
  • wrapping the class name is only required when the class name has a hyphen. `{active:true}` should work `{'active-more':true}` requires the single quotes – Justin Kruse Feb 24 '17 at 05:21