Utilizing ng-class within a ng-repeat loop

<table>
    <tbody>
            <tr ng-repeat="task in todos"
                ng-class="{'warning': task.status == 'Hold' , 'success': task.status == 'Completed',
              'active': task.status == 'Started', 'danger': task.status == 'Pending' } ">
                <td>{{$index + 1}}</td>
                <td>{{task.name}}</td>
                <td>{{task.date|date:'yyyy-MM-dd'}}</td>
                <td>{{task.status}}</td>
            </tr>
    </tbody>
</table>

A unique class is applied to each row based on the status of the task.

Angular JS offers this feature through the ng-class Directive. This directive allows you to set conditions and assign classes based on those conditions in two different ways.

Method 1

<div ng-class="{0:'one', 1:'two',2:'three'}[status]"></div>

In this example, the class applied depends on the value of the status variable.

If status is 0, apply class one.

If status is 1, apply class two.

If status is 2, apply class three.

---

Method 2

<div ng-class="{1:'test_yes', 0:'test_no'}[status]"></div>

In this method, the class is determined by the value of the status variable.

If status is 1 or true, add the class test_yes.

If status is 0 or false, add the class test_no.

There are some great examples provided above, all of which utilize curly brackets (JSON map). However, an alternative approach is to generate a result through computation. This result can consist of a list of CSS class names rather than just a map. For instance:

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 applied. Otherwise, the class disabled will be applied.

The use of the list [] allows for the application of multiple classes, not just one.

If you want to simplify your code, consider using the html class attribute along with a shorthand if/else statement. It doesn't have to be complicated - just follow this method.

<div class="{{expression == true ? 'class_if_expression_true' : 'class_if_expression_false' }}">Your Content</div>

Learn how to apply ng-class dynamically using two different methods

Method 1

Utilizing the ternary operator

<div ng-class="condition?'class1':'class2'"></div>

Result

If the condition is true, class1 will be added to the element; otherwise, class2 will be added.

Limitation

Changing the conditional value at runtime may not reflect the class change. For dynamic class changes, it's recommended to follow method 2.

Method 2

<div ng-class="{value1:'class1', value2:'class2'}[condition]"></div>

Result

If the condition matches with value1, class1 will be applied; if it matches with value2, class2 will be applied, and so forth. This method allows for seamless dynamic class changes.

We hope this guide proves useful to you!

The Angular syntax makes use of the : operator to simulate an if statement in code.

<div ng-class="{ 'clearfix' : (row % 2) == 0 }">

This code snippet adds a clearfix class to rows that are even. However, the expression within the curly braces can be any valid condition similar to an if statement, and it must evaluate to either true or false.

One good approach is to utilize a function with ng-class when dealing with intricate logic for determining the appropriate CSS class.

Check out this example on jsFiddle

HTML:

<div ng-app>
  <div ng-controller="testCtrl">
        <div ng-class="getCSSClass()">Testing ng-class using function</div>       
    </div>
</div>

CSS:

.testclass { Background: lightBlue}

JavaScript:

function testCtrl($scope) {
    $scope.getCSSClass = function() {
     return "testclass ";
  }     
}

ng-class is an essential Directive in AngularJs that offers various options for styling elements, including "String Syntax," "Array Syntax," "Evaluated Expression," "Ternary Operator," and more.

Utilizing ngClass with String Syntax

The simplest way to use ngClass is by assigning an Angular variable to it, which will then be applied as the class for that element.

<input type="text" ng-model="textType">
<div ng-class="textType">Look! I'm Words!

Check out a Demo Example of ngClass Using String Syntax

Using Array Syntax with ngClass

This method allows you to apply multiple classes by assigning them through an array.

<input type="text" ng-model="styleOne">
<input type="text" ng-model="styleTwo">
<div ng-class="[styleOne, styleTwo]">Look! I'm Words!

Implementing Evaluated Expression with ngClass

An advanced approach involves evaluating expressions where applying a class is dependent on a variable or expression returning true.

<input type="checkbox" ng-model="awesome"> Are You Awesome?
<div ng-class="{ 'text-success': awesome }">

View an Example of ngClass Using Evaluated Expression

Utilizing Values in ngClass

Comparing multiple values with a single variable can be achieved using this method.

<div ng-class="{value1:'class1', value2:'class2'}[condition]"></div>

Applying Ternary Operator with ngClass

The ternary operator provides a shorthand way to assign different classes based on whether an expression is true or false.

ng-class="$variableToEvaluate ? 'class-if-true' : 'class-if-false'">

Conditional Styling for First, Last, or Specific Number

When using the ngRepeat directive, special properties like $first, $last, $even, and $odd allow for applying classes based on position in the list.

<ul>
  <li ng-class="{ 'text-success': $first }" ng-repeat="item in items">{{ item.name }}</li>
</ul>

<ul>
  <li ng-class="{ 'text-danger': $last }" ng-repeat="item in items">{{ item.name }}</li>
</ul>

<ul>
  <li ng-class="{ 'text-info': $even, 'text-danger': $odd }" ng-repeat="item in items">{{ item.name }}</li>
</ul>

If you're working with Angular 2, try implementing the following code snippet:

<div [ngClass]="{'active': dashboardComponent.selected_menu == 'mapview'}">Content</div>

try this

<div ng-class="{status}[condition]"></div>

for instance if the condition is [3 == 3], status options are {true: '...', false: '...'}

<div ng-class="{true: 'ClassX', false: 'ClassY'}[condition]"></div>