AngularJS ngClass conditional

Question

Is there any way to make an expression for something like ng-class to be a conditional   For example  I have tried the following    lt span ng-class   test   obj value1      someothervalue      gt test lt  span gt    The issue with this code is that no matter what obj value1 is  the class test is always applied to the element  Doing this    lt span ng-class   test  obj value2   gt test lt  span gt    As long as obj value2 does not equal a truthy value  the class in not applied   Now I can work around the issue in the first example by doing this    lt span ng-class   test  checkValue1     gt test lt  span gt    Where the checkValue1 function looks like this    scope checkValue1   function       return  scope obj value      somevalue       I am just wondering if this is how ng-class is supposed to work   I am also building a custom directive where I would like to do something similar to this  However  I can t find a way to watch an expression  and maybe that is impossible and the reason why it works like this    Here is a plnkr to show what I mean

User · Accepted Answer

Your first attempt was almost right  It should work without the quotes    test  obj value1     someothervalue     Here is a plnkr   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  as you did in your third attempt   Just to complement  You can also use logical operators to form logical expressions like   ng-class    test   obj value1     someothervalue     obj value2     somethingelse

User · Answer

Angular JS provide this functionality in ng-class Directive  In which you can put condition and also assign conditional class  You can achieve this in two different ways   Type 1   lt div ng-class   0  one   1  two  2  three   status   gt  lt  div gt    In this code class will be apply according to value of status value  if status value is 0 then apply class one  if status value is 1 then apply class two  if status value is 2 then apply class three    Type 2   lt div ng-class   1  test yes   0  test no   status   gt  lt  div gt    In which class will be apply by value of status  if status value is 1 or true then it will add class test yes  if status value is 0 or false then it will add class test no

User · Answer

Angular syntax is to use the   operator to perform the equivalent of an if modifier   lt div ng-class     clearfix     row   2     0    gt    Add clearfix class to even rows  Nonetheless  expression could be anything we can have in normal if condition and it should evaluate to either true or false

User · Answer

Using ng-class inside ng-repeat   lt table gt       lt tbody gt               lt tr ng-repeat  task in todos                  ng-class    warning   task status     Hold     success   task status     Completed                  active   task status     Started    danger   task status     Pending      gt                   lt td gt    index   1   lt  td gt                   lt td gt   task name   lt  td gt                   lt td gt   task date date  yyyy-MM-dd    lt  td gt                   lt td gt   task status   lt  td gt               lt  tr gt       lt  tbody gt   lt  table gt    For each status in task status a different class is used for the row

User · Answer

use this   lt div ng-class   states  condition   gt  lt  div gt    for example if the condition is  2    2   states are  true         false           lt div ng-class   true   ClassA   false   ClassB   condition   gt  lt  div gt

User · Answer

I see great examples above but they all start with curly brackets  json map   Another option is to return a result based on computation  The result can also be a list of css class names  not just map   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   The list    is used for using multiple classes  not just one

User · Answer

I am going to show you two methods by which you can dynamically apply ng-class  Step-1  By using ternary operator   lt div ng-class  condition  class1   class2   gt  lt  div gt    Output  If your condition is true then class1 will be applied to your element else class2 will be applied   Disadvantage  When you will try to change the conditional value at run time the class somehow will not changed  So I will suggest you to go for step2 if you have requirement like dynamic class change   Step-2   lt div ng-class   value1  class1   value2  class2   condition   gt  lt  div gt    Output  if your condition matches with value1 then class1 will be applied to your element  if matches with value2 then class2 will be applied and so on  And dynamic class change will work fine with it   Hope this will help you

User · Answer

There is a simple method which you could use with html class attribute and shorthand if else  No need to make it so complex  Just use following method    lt div class    expression    true    class if expression true     class if expression false      gt Your Content lt  div gt    Happy Coding  Nimantha Perera

User · Answer

For Angular 2  use this   lt div  ngClass     active   dashboardComponent selected menu     mapview    gt Content lt  div gt

User · Answer

Using function with ng-class is a good option when someone has to run complex logic to decide the appropriate CSS class   http   jsfiddle net ms403Ly8 2   HTML    lt div ng-app gt     lt div ng-controller  testCtrl  gt           lt div ng-class  getCSSClass    gt Testing ng-class using function lt  div gt              lt  div gt   lt  div gt    CSS    testclass   Background  lightBlue    JavaScript    function testCtrl  scope         scope getCSSClass   function          return  testclass

User · Answer

ng-class is a Directive of core AngularJs  In which you can use  String Syntax    Array Syntax    Evaluated Expression     Ternary Operator  and many more options described below   ngClass Using String Syntax  This is the simplest way to use ngClass  You can just add an Angular variable to ng-class and that is the class that will be used for that element    lt  -- whatever is typed into this input will be used as the class for the div below -- gt   lt input type  text  ng-model  textType  gt    lt  -- the class will be whatever is typed into the input box above -- gt   lt div ng-class  textType  gt Look  I m Words    Demo Example of ngClass Using String Syntax  ngClass Using Array Syntax  This is similar to the string syntax method except you are able to apply multiple classes    lt  -- both input boxes below will be classes for the div -- gt   lt input type  text  ng-model  styleOne  gt   lt input type  text  ng-model  styleTwo  gt    lt  -- this div will take on both classes from above -- gt   lt div ng-class   styleOne  styleTwo   gt Look  I m Words    ngClass Using Evaluated Expression  A more advanced method of using ngClass  and one that you will probably use the most  is to evaluate an expression  The way this works is that if a variable or expression evaluates to true  you can apply a certain class  If not  then the class won t be applied    lt  -- input box to toggle a variable to true or false -- gt   lt input type  checkbox  ng-model  awesome  gt  Are You Awesome   lt input type  checkbox  ng-model  giant  gt  Are You a Giant    lt  -- add the class  text-success  if the variable  awesome  is true -- gt   lt div ng-class     text-success   awesome   text-large   giant    gt    Example of ngClass Using Evaluated Expression  ngClass Using Value  This is similar to the evaluated expression method except you just able to compares multiple values with the only variable    lt div ng-class   value1  class1   value2  class2   condition   gt  lt  div gt    ngClass Using the Ternary Operator  The ternary operator allows us to use shorthand to specify two different classes  one if an expression is true and one for false  Here is the basic syntax for the ternary operator   ng-class   variableToEvaluate    class-if-true     class-if-false   gt    Evaluating First  Last or Specific Number  If you are using the ngRepeat directive and you want to apply classes to the first  last  or a specific number in the list  you can use special properties of ngRepeat  These include  first   last   even   odd  and a few others  Here s an example of how to use these    lt  -- add a class to the first item -- gt   lt ul gt     lt li ng-class     text-success    first    ng-repeat  item in items  gt    item name    lt  li gt   lt  ul gt    lt  -- add a class to the last item -- gt   lt ul gt     lt li ng-class     text-danger    last    ng-repeat  item in items  gt    item name    lt  li gt   lt  ul gt    lt  -- add a class to the even items and a different class to the odd items -- gt   lt ul gt     lt li ng-class     text-info    even   text-danger    odd    ng-repeat  item in items  gt    item name    lt  li gt   lt  ul gt

[html] AngularJS ngClass conditional

Examples related to html

Examples related to css

Examples related to angularjs