Adding multiple class using ng-class

Question

Can we have multiple expression to add multiple ng-class    for eg    lt div ng-class   class1  expressionData1  class2  expressionData2   gt  lt  div gt    If yes can anyone put up the example to do so

User · Answer

An incredibly powerful alternative to other answers here   ng-class       key  resulting-class-expression    key-matching-expression             Some examples    1  Simply adds  class1 class2 class3  to the div    lt div ng-class    true   class1   true    true   class2 class3   true    gt  lt  div gt    2  Adds  odd  or  even  classes to div  depending on the  index    lt div ng-class    0  even   1  odd     index   2    gt  lt  div gt    3  Dynamically creates a class for each div based on  index   lt div ng-class    true  index   index  true    gt  lt  div gt    If  index 5 this will result in    lt div class  index5  gt  lt  div gt    Here s a code sample you can run    x000D   x000D  var app   angular module  app         x000D  app controller  MyCtrl   function  scope   x000D     scope items    abcdefg  split      x000D       x000D   odd    background-color   eee    x000D   even   background-color   fff    x000D   index5  background-color   0095ff  color  white  font-weight  bold    x000D      font-family   Courier New   Courier  monospace    x000D   lt script src  https   ajax googleapis com ajax libs angularjs 1 0 1 angular min js  gt  lt  script gt  x000D   x000D   lt div ng-app  app  ng-controller  MyCtrl  gt  x000D     lt div ng-repeat  item in items  x000D      ng-class    true  index   index  true    0  even   1  odd     index   2     gt  x000D      index    index        item    ng-class      true  index   index  true    0  even   1  odd     index   2    join         x000D     lt  div gt  x000D   lt  div gt  x000D   x000D   x000D

User · Answer

To apply different classes when different expressions evaluate to true    lt div ng-class   class1   expression1  class2   expression2   gt      Hello World   lt  div gt    To apply multiple classes when an expression holds true    lt  -- notice expression1 used twice -- gt   lt div ng-class   class1   expression1  class2   expression1   gt      Hello World   lt  div gt    or quite simply    lt div ng-class    class1 class2    expression1   gt      Hello World   lt  div gt    Notice the single quotes surrounding css classes

User · Answer

With multiple conditions   lt div ng-class    class1    con1    can2   class2    con3  amp  amp  con4   gt  Hello World   lt  div gt

User · Answer

For the ternary operator notation    lt div ng-class  expression1   class1 class2     class3 class4   gt

User · Answer

Using a  scope method on the controller  you can calculate what classes to output in the view  This is especially handy if you have a complex logic for calculating class names and it will reduce the amount of logic in your view by moving it to the controller   app controller  myController   function  scope          scope className   function              var className    initClass            if  condition1                className      class1            if  condition2                className      class2            return className               and in the view  simply    lt div ng-class  className    gt  lt  div gt

User · Answer

Other way we can create a function to control  using multiple class    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    Script   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    Using it   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      You can refer to full code page at ng-class if example

User · Answer

Your example works for conditioned classes  the class name will show if the expressionDataX is true       lt div ng-class   class1  expressionData1  class2  expressionData2   gt  lt  div gt   You can also add multiple classes  supplied by the user of the element      lt div ng-class   class1  class2   gt  lt  div gt   Usage    lt div class  foo bar  class1  foo  class2  bar  gt  lt  div gt

User · Answer

Below active and activemenu are classes and itemCount and ShowCart is expression boolean values   ng-class    active    itemCount   activemenu    showCart

User · Answer

Here is an example comparing multiple angular-ui-router states using the OR    operator     lt li ng-class                 warning               state includes  out pay code wrong                   state includes  out pay failed                     active               state includes  out pay           gt    It will give the li the classes warning and or active  depening on whether the conditions are met

User · Answer

Yes you can have multiple expression to add multiple class in ng-class   For example    lt div ng-class   class1 Result length  2 class2 Result length  3   gt  Dummy Data  lt  div gt

User · Answer

Found another way thanks to Scotch io   lt div ng-repeat  step in steps  class  step-container step  ng-class   step status  step type   ng-click  onClick step type   gt    This was my reference PATH

[angularjs] Adding multiple class using ng-class

Examples related to angularjs

Examples related to ng-class