[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

        <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>

    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


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


    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.