Search code examples
javascriptcssangularjsng-class

Angular Expression in ng-class evaluating after css is applied (late binding)

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

Solution

  • 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