AngularJS ng-class if-else expression

Question

With AngularJS I m using ng-class the following way    lt div class  bigIcon  data-ng-click  PickUp     ng-class   first  classA   second  classB   third  classC   fourth  classC   call State    gt    I m wondering if I can use the if-else expression to do something similar to this    lt div class  bigIcon  data-ng-click  PickUp     ng-class   first  classA   second  classB   else  classC   call State    gt    So whenever call State differs from first or second use classC and avoid specifying each value

User · Answer

Clearly  We can make a function to return a CSS class name with following fully example    CSS   lt style gt       Red           color  Red             Yellow           color  Yellow               Blue           color  Blue               Green           color  Green             Gray           color  Gray              b           font-weight  bold         lt  style gt    JS   lt script gt      angular module  myapp                    controller  ExampleController      scope   function   scope                     scope MyColors     It is Red    It is Yellow    It is Blue    It is Green    It is Gray                     scope getClass   function  strValue                        if  strValue      It is Red                            return  Red                       else if  strValue      It is Yellow                            return  Yellow                       else if  strValue      It is Blue                            return  Blue                       else if  strValue      It is Green                            return  Green                       else if  strValue      It is Gray                            return  Gray                                   lt  script gt    And then    lt body ng-app  myapp  ng-controller  ExampleController  gt    lt h2 gt AngularJS ng-class if example lt  h2 gt   lt ul  gt       lt li ng-repeat  icolor in MyColors   gt           lt p ng-class   getClass icolor    b    gt   icolor   lt  p gt       lt  li gt   lt  ul gt   lt hr  gt   lt p gt Other way using   ng-class    class1    expression1   class2    expression2  class3  expression2       lt  p gt   lt ul gt       lt li ng-repeat  icolor in MyColors  gt           lt p ng-class    Red  icolor   It is Red   Yellow  icolor   It is Yellow   Blue  icolor   It is Blue   Green  icolor   It is Green   Gray  icolor   It is Gray    class  b  gt   icolor   lt  p gt       lt  li gt   lt  ul gt      You can refer to full code page at ng-class if example

User · Answer

Use nested inline if-then statements  Ternary Operators   lt div ng-class  quot         class-1             class-2     class-3   quot  gt   for example    lt div ng-class  quot apt name length  gt   15    col-md-12     apt name length  gt   10    col-md-6     col-md-4   quot  gt           lt  div gt   And make sure it s readable by your colleagues

User · Answer

A workaround of mine is to manipulate a model variable just for the ng-class toggling   For example  I want to toggle class according to the state of my list   1  Whenever my list is empty  I update my model    scope extract   function removeItemId         scope list  jQuery grep  scope list  function item  return item id    removeItemId        if    scope list length             scope liststate    empty             2  Whenever my list is not empty  I set another state   scope extract   function item         scope list push item        scope liststate    notempty       3  When my list is not ever touched  I want to give another class  this is where the page is initiated     scope liststate    init     3  I use this additional model on my ng-class   ng-class    bg-empty   liststate     empty    bg-notempty   liststate     notempty    bg-init   liststate    init

User · Answer

The above solutions didn t work for me for classes with background images somehow  What I did was I create a default class  the one you need in else  and set class  defaultClass  and then the ng-class   class1 abc class2 xyz     lt span class  booking warning  ng-class    process success  booking bookingStatus     BOOKING COMPLETED     booking bookingStatus     BOOKING PROCESSED   booking info  booking bookingStatus     INSTANT BOOKING REQUEST RECEIVED     booking bookingStatus     BOOKING PENDING    gt   lt strong gt   booking bookingStatus   lt  strong gt   lt  span gt    P S  The classes that are in condition should override the default class i e marked as  important

User · Answer

You can try this method    lt  p gt  lt br   gt  lt br   gt   lt p gt ng-class   test  obj value1     someothervalue     obj value2     somethingelse   lt br   gt  lt br   gt  lt br   gt   ng-class   test  obj value1     someothervalue     obj value2     somethingelse     You can get complete details from here

User · Answer

Use it this way        lt div  ngClass    cssClass A  condition 1  cssClass B  condition 2  cssClass C  condition 3   gt     lt  div gt

User · Answer

This is the best and reliable way to do this  Here is a simple example and after that you can develop your custom logic     In  ts public showUploadButton boolean   false   if some logic          your logic     showUploadButton   true       In template  lt button  class   showUploadButton    btn btn-default    btn btn-info   gt Upload lt  button gt

User · Answer

you could try by using a function like that     lt div ng-class  whatClassIsIt call State   gt    Then put your logic in the function itself         scope whatClassIsIt  function someValue        if someValue   first               return  ClassA       else if someValue   second            return  ClassB        else          return  ClassC           I made a fiddle with an example   http   jsfiddle net DotDotDot nMk6M

User · Answer

I had a situation where I needed two  if  statements that could both go true and an  else  or default if neither were true  not sure if this is an improvement on Jossef s answer but it seemed cleaner to me    ng-class    class-one    value one    class-two    value two   class  else-class    Where value one and value two are true  they take precedent over the  else-class

[angularjs] AngularJS ng-class if-else expression

Examples related to angularjs

Examples related to ng-class