What is the best way to conditionally apply a class

Question

Lets say you have an array that is rendered in a ul with an li for each element and a property on the controller called selectedIndex  What would be the best way to add a class to the li with the index selectedIndex in AngularJS   I am currently duplicating  by hand  the li code and adding the class to one of the li tags and using ng-show and ng-hide to show only one li per index

User · Answer

partial     lt div class  col-md-4 text-right  gt         lt a ng-class  campaign range      thismonth     btn btn-blue      btn btn-link   href     ng-click  change range  thismonth    gt This Month lt  a gt         lt a ng-class  campaign range      all     btn btn-blue      btn btn-link   href     ng-click  change range  all    gt All Time lt  a gt     lt  div gt    controller     scope campaign range    all      scope change range   function range             if  range      all                          scope campaign range    all                    else                          scope campaign range    thismonth

User · Answer

well i would suggest you to check condition in your controller with a function returning true or false     lt div class  week-wrap  ng-class   today  getTodayForHighLight todayDate  day date    gt   day date   lt  div gt    and in your controller check the condition    scope getTodayForHighLight   function today  date   return  today    date

User · Answer

Just adding something that worked for me today  after much searching      lt div class  form-group  ng-class   true   has-error   ctrl submitted  amp  amp  myForm myField  error required   gt    Hope this assists in your successful development       Undocumented Expression Syntax   Great Website Link

User · Answer

Ternary operator has just been added to angular parser in 1 1 5   So the simplest way to do this is now    ng class    index  selectedIndex    selected

User · Answer

I am new to Angular but have found this to solve my issue    lt i class  icon-download  ng-click  showDetails     showDetails  ng-class    icon-upload   showDetails   gt  lt  i gt    This will conditionally apply a class based on a var  It starts off with a icon-download as a default  the using ng-class  I check the status of showDetails if true false and apply class icon-upload  Its working great   Hope it helps

User · Answer

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

User · Answer

You can use this npm package  It handles everything and has options for static and conditional classes based on a variable or a function      Support for string arguments getClassNames  class1    class2        support for Object getClassNames  class1  true  class2   false        support for all type of data getClassNames  class1    class2     class3    class4           class5   function     return false         class6   function     return true          lt div className  getClassNames  class1  true  class2   false      gt

User · Answer

My favorite 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  amp  amp   trueClass      falseClass

User · Answer

This is in my work multiple conditionally judge    lt li ng-repeat  eOption in exam examOptions  ng-class  exam examTitle ANSWER COM  exam examTitle RIGHT ANSWER  eOption eoSequence  exam examTitle ANSWER COM  right      eOption eoSequence  exam examTitle ANSWER COM  wrong  eOption eoSequence  exam examTitle RIGHT ANSWER  right      gt     lt strong gt   eOption eoSequence   lt  strong gt   amp nbsp  amp nbsp  amp nbsp  amp nbsp   amp nbsp  amp nbsp  amp nbsp  amp nbsp     lt span ng-bind-html  eOption eoName   to trusted  gt 2020   lt  span gt   lt  li gt

User · Answer

Here is a much simpler solution     x000D   x000D  function MyControl  scope   x000D       scope values     a   b   c   d   e   f    x000D       scope selectedIndex   -1  x000D       x000D       scope toggleSelect   function ind   x000D          if  ind      scope selectedIndex    x000D               scope selectedIndex   -1  x000D            else  x000D               scope selectedIndex   ind  x000D            x000D        x000D       x000D       scope getClass   function ind   x000D          if  ind      scope selectedIndex    x000D              return  selected   x000D            else  x000D              return     x000D            x000D        x000D          x000D       scope getButtonLabel   function ind   x000D          if  ind      scope selectedIndex    x000D              return  Deselect   x000D            else  x000D              return  Select   x000D            x000D        x000D    x000D   selected   x000D      color red  x000D    x000D   lt script src  https   ajax googleapis com ajax libs angularjs 1 0 1 angular min js  gt  lt  script gt  x000D   lt div ng-app ng-controller  MyControl  gt  x000D       lt ul gt  x000D           lt li ng-class  getClass  index   ng-repeat  value in values   gt   value    lt button ng-click  toggleSelect  index   gt   getButtonLabel  index    lt  button gt  lt  li gt  x000D       lt  ul gt  x000D       lt p gt Selected    selectedIndex   lt  p gt  x000D   lt  div gt  x000D   x000D   x000D

User · Answer

I faced a similar problem recently and decided to just create a conditional filter     angular module  myFilters                        if  filter        Simple filter useful for conditionally applying CSS classes and decouple        view from controller              filter  if   function           return function input  value            if  typeof input       string               input    input                         return value  input 0    input 1                      It takes a single argument  which is either a 2-element array or a string  which gets turned into an array that is appended an empty string as the second element    lt li ng-repeat  item in products   filter search   orderBy orderProp     page pageNum pageLength  ng-class   opened  if isOpen item   gt         lt  li gt

User · Answer

Here is another option that works well when ng-class can t be used  for example when styling SVG    ng-attr-class    someBoolean  amp  amp   class-when-true      class-when-false         I think you need to be on latest unstable Angular to use ng-attr-  I m currently on 1 1 4

User · Answer

This will probably get downvoted to oblivion  but here is how I used 1 1 5 s ternary operators to switch classes depending on whether a row in a table is the first  middle or last -- except if there is only one row in the table    lt span class  attribute-row  ng-class   restaurant Attributes length     1       first    attribute-first-row   false     middle    attribute-middle-row   false     last    attribute-last-row   false   gt   lt  span gt

User · Answer

This works like a charm      lt ul class  nav nav-pills  ng-init  selectedType    return   gt       lt li role  presentation  ng-class    active  selectedType      return            ng-click  selectedType    return   gt  lt a href   return  gt return       lt  a gt  lt  li gt       lt li role  presentation  ng-class    active  selectedType      oneway            ng-click  selectedType    oneway   gt  lt a href   oneway  gt oneway      lt  a gt  lt  li gt   lt  ul gt

User · Answer

If you want to go beyond binary evaluation and keep your CSS out of your controller you can implement a simple filter that evaluates the input against a map object   angular module  myApp filters         filter  switch   function             return function  input  map              return map input                           This allows you to write your markup like this    lt div ng-class  muppets star switch   Kermit   green    Miss Piggy    pink    Animal    loud    gt           lt  div gt

User · Answer

If you having a common class that is applied to many elements you can create a custom directive that will add that class like ng-show ng-hide   This directive will add the class  active  to the button if it s clicked  module directive  ngActive       animate   function  animate      return function scope  element  attr        scope  watch attr ngActive  function ngActiveWatchAction value          animate value    addClass     removeClass   element   active                        More info

User · Answer

Check this   The infamous AngularJS if else statement    When I started using Angularjs  I was a bit surprised that I couldn   t find an if else statement   So I was working on a project and I noticed that when using the if else statement  the condition shows while loading  You can use ng-cloak to fix this    lt div class  ng-cloak  gt    lt p ng-show  statement  gt Show this line lt  span gt    lt p ng-hide  statement  gt Show this line instead lt  span gt   lt  div gt     ng-cloak   display  none    Thanks amadou

User · Answer

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

User · Answer

I ll add to this  because some of these answers seem out of date  Here s how I do it     lt class  ng-class isSelected  gt    Where  isSelected  is a javascript variable defined within the scoped angular controller   To more specifically address your question  here s how you might generate a list with that    HTML    lt div ng-controller  ListCtrl  gt         lt li class  ng-class item isSelected  ng-repeat  item in list  gt              item name        lt  li gt     lt  div gt      JS   function ListCtrl  scope             scope list                 name    Item 1    isSelected    active                name    Item 2    isSelected                  See  http   jsfiddle net tTfWM   See  http   docs angularjs org api ng directive ngClass

User · Answer

We can make a function to manage return class with condition     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                        switch strValue                            case  It is Red  return  Red  break                          case  It is Yellow  return  Yellow  break                          case  It is Blue  return  Blue  break                          case  It is Green  return  Green  break                          case  It is Gray  return  Gray  break                                                        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

The was I recently did that was doing this    lt input type  password   placeholder  Enter your password  ng-class   true   form-control isActive   false   isNotActive   isShowing   gt    The isShowing value is a value that is located on my controller that gets toggled with the click of a button and the parts between the single parenthesis are classes I created in my css file   EDIT  I would also like to add that codeschool com has a free course that is sponsored by google on AngularJS that goes over all of this stuff and then some  There is no need to pay for anything  just signup for an account and get going   Best of luck to you all

User · Answer

If you are using angular pre v1 1 5  i e  no ternary operator  and you still want an equivalent way to set a value in both conditions you can do something like this   ng-class    class1  item isReadOnly    false   class2  item isReadOnly    true

[css] What is the best way to conditionally apply a class?

partial

controller

Examples related to css

Examples related to angularjs