-1

I have an ng-class where class is dynamically loaded i.e evaluating $rootscope in expression, late binding is happening

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

Here {{vm.$rootScope.currentPage}} expression is evaluating after class for the control is loaded in place of that if give 1 it is working or and if I check in inspect element I can see [1==1] i.e {{vm.$rootScope.currentPage}} this is returning correct value but class is not getting applied

Can refer this Condition in ng- class not working

Community
  • 1
  • 1
sudhir
  • 1,387
  • 3
  • 25
  • 43

2 Answers2

1

you should use [vm.$rootScope.currentPage===1] instead of [{{vm.$rootScope.currentPage}}==1] . no need to use {{}} in []

and need to change

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

for ng-class="{true: 'active', false:'inactive' }[vm.$rootScope.currentPage==1]" class applied way

if expression value is true then apply class active

if expression value is false then apply class inactive

so use:

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

Also can use ternary operator in ng-class like: ng-class="vm.currentPage===1? 'active': 'inactive'"

<li role="presentation" style="width:200px" ng-class="vm.currentPage===1? 'active': 'inactive'">
      <a href="#/create">Create</a>
 </li>

PLUNKER DEMO

Shaishab Roy
  • 16,335
  • 7
  • 50
  • 68
  • Not Working , in inspect element I can see in place of [{{vm.$rootScope.currentPage===1}}] this as [true] but still class is not applying because expression evaluation is done after class is applied to that control – sudhir Apr 13 '16 at 06:48
  • Updated my answer and added plunker demo @sudhir – Shaishab Roy Apr 13 '16 at 08:37
  • Awesome bro, actually instead in click function I was maintaining a global variable and updating that in individual controllers which is getting updated after class is applied. Any this worked as I'm using click function and passing params which is better way, Thanks! – sudhir Apr 13 '16 at 09:18
  • You are welcome. Actually I added two button to change page and check change.You can use as you need and I gave valid expression to set class. can accept if helped you:) – Shaishab Roy Apr 13 '16 at 09:33
  • Can Accept but the question is why isn't working when evaluating rootscope i.e its getting updated but that expression is evaluated after class is applied . However, solution you provided is the best for my scenario – sudhir Apr 13 '16 at 09:53
0

Try this- ng-class="vm.$rootScope.currentPage==1?'active':'inactive'".

You're adding multiple extra layers of work for Angular, just for a simple true/false test. Most notably, you had a {{ }} expression in an ng directive. AFAIK, all of these already track the expression you put in, and adding a {{ }} just adds more that it needs to watch.

You may also be able to refer it it simply as currentPage, instead of vm.$rootScope.currentPage, but that depends if you've set up the scoping for whatever component this is.

Harris
  • 1,775
  • 16
  • 19
  • It is not working and if you do not put code expressions ng-class will not treat as angular expression especially ng-class , ng-show and ng-hide AFAIK – sudhir Apr 13 '16 at 05:33
  • `vm.$rootScope.currentPage==1?'active':'inactive'` is an expression. I think you might be referencing things wrong. – Harris Apr 14 '16 at 00:58