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

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

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

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

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 && 'trueClass' || 'falseClass'"

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

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 another option that works well when ng-class can't be used (for example when styling SVG):

ng-attr-class="{{someBoolean && '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

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

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

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:

<li ng-repeat="item in products | filter:search | orderBy:orderProp |
  page:pageNum:pageLength" ng-class="'opened'|if:isOpen(item)">
  ...
</li>

User · Answer

The was I recently did that was doing this:

<input type="password"  placeholder="Enter your password"
ng-class="{true: 'form-control isActive', false: 'isNotActive'}[isShowing]">

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

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

Just adding something that worked for me today, after much searching...

<div class="form-group" ng-class="{true: 'has-error'}[ctrl.submitted && myForm.myField.$error.required]">

Hope this assists in your successful development.

=)

Undocumented Expression Syntax : Great Website Link... =)

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

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

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

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 am new to Angular but have found this to solve my issue:

<i class="icon-download" ng-click="showDetails = ! showDetails" ng-class="{'icon-upload': showDetails}"></i>

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 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:

<div ng-class="muppets.star|switch:{'Kermit':'green', 'Miss Piggy': 'pink', 'Animal': 'loud'}">
    ...
</div>

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

User · Answer

well i would suggest you to check condition in your controller with a function returning true or false .

<div class="week-wrap" ng-class="{today: getTodayForHighLight(todayDate, day.date)}">{{day.date}}</div>

and in your controller check the condition

$scope.getTodayForHighLight = function(today, date){
return (today == date);
}

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

The answer is

partial

controller

Examples related to css

Examples related to angularjs

Tags