What is the best way to conditionally apply a class?

What is the best way to conditionally apply a class?

Asked on October 22, 2018 in AngularJs.
Add Comment


  • 5 Answer(s)

      There is also a new better way of applying classes conditionally, like

    ng-class="{selected: $index==selectedIndex}"
    

      Angular now supports expressions that return an object. Each property (name) of this object is now considered as a class name and is applied depending on its value.

      However these ways are not functionally equal. Here is an example:

    ng-class="{admin:'enabled', moderator:'disabled', '':'hidden'}[user.role]"
    

      We could therefore reuse existing CSS classes by basically mapping a model property to a class name and at the same time keep CSS classes out of Controller code.

    Answered on October 22, 2018.
    Add Comment

    ng-class supports an expression that must evaluate to either

    A string of space-delimited class names, or
    An array of class names, or
    A map/object of class names to boolean values.

    So, using form 3) we can simply write

    ng-class="{'selected': $index==selectedIndex}"
    
    

    See also How do I conditionally apply CSS styles in AngularJS? for a broader answer.

    Update: Angular 1.1.5 has added support for a ternary operator, so if that construct is more familiar to you:

    ng-class="($index==selectedIndex) ? 'selected' : ''"
    
    
    Answered on October 22, 2018.
    Add Comment

    Simple method is using the ternary expression.]

    ng-class="condition ? 'trueClass' : 'falseClass'"
    
    

    Note: Incase you’re using a older version of Angular you should use this instead,

    ng-class="condition && 'trueClass' || 'falseClass'"
    
    
    Answered on October 22, 2018.
    Add Comment

    An alternate method is to use the ternary expression.

    ng-class="condition ? 'trueClass' : 'falseClass'"
    
    
    Answered on December 22, 2018.
    Add Comment

    If you don’t want to put CSS class names into Controller like I do, here is an old trick that I use since pre-v1 days. We can write an expression that evaluates directly to a class name selected, no custom directives are necessary:

    ng:class="{true:'selected', false:''}[$index==selectedIndex]"

    Please note the old syntax with colon.

    There is also a new better way of applying classes conditionally, like:

    ng-class="{selected: $index==selectedIndex}"

    Angular now supports expressions that return an object. Each property (name) of this object is now considered as a class name and is applied depending on its value.

    However these ways are not functionally equal. Here is an example:

    ng-class="{admin:'enabled', moderator:'disabled', '':'hidden'}[user.role]"

    We could therefore reuse existing CSS classes by basically mapping a model property to a class name and at the same time keep CSS classes out of Controller code.

    Answered on February 13, 2019.
    Add Comment


  • Your Answer

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