[Solved] – AngularJS – Explain about ngClass conditional?

Explain about ngClass conditional?

Asked on October 19, 2018 in AngularJs.
Add Comment


  • 3 Answer(s)

    It should work without the quotes.

    {test: obj.value1 == 'someothervalue'}
    
    

    The ngClass directive will work with any expression that evaluates truthy or falsey, a bit similar to Javascript expressions but with some differences, you can read about here. If your conditional is too complex, then you can use a function that returns truthy or falsey,

    You can also use logical operators to form logical expressions like

    ng-class="{'test': obj.value1 == 'someothervalue' || obj.value2 == 'somethingelse'}"
    
    

     

    Answered on October 19, 2018.
    Add Comment

    Using ng-class inside ng-repeat

    <table>
      <tbody>
        <tr ng-repeat="task in todos"
          ng-class="{'warning': task.status == 'Hold' , 'success': task.status == 'Completed',
        'active': task.status == 'Started', 'danger': task.status == 'Pending' } ">
         <td>{{$index + 1}}</td>
         <td>{{task.name}}</td>
         <td>{{task.date|date:'yyyy-MM-dd'}}</td>
         <td>{{task.status}}</td>
        </tr>
      </tbody>
    </table>
    

    This code will help you

    Answered on October 19, 2018.
    Add Comment

    Another option is to return a result based on computation. The result can also be a list of css class names

    Example:

    ng-class="(status=='active') ? 'enabled' : 'disabled'"
    
    

    or

    ng-class="(status=='active') ? ['enabled'] : ['disabled', 'alik']"
    

    Explanation: If the status is active, the class enabled will be used. Otherwise, the class disabled will be used.

    Answered on October 19, 2018.
    Add Comment


  • Your Answer

    By posting your answer, you agree to the privacy policy and terms of service.