Conditionally Apply a CSS Class in AngularJS

By the end of this page, you will understand how AngularJS conditionally applies CSS classes using ngClass, especially when rendering lists with ngRepeat. You will also see how $index works, how to compare it with selectedIndex, and why this is better than duplicating HTML with ng-show and ng-hide.

In AngularJS, the standard way to conditionally apply a CSS class is with the ngClass directive.

When you render a list using ngRepeat, AngularJS gives you access to a special local variable called $index, which represents the current item's position in the loop. If your controller stores a selectedIndex, you can compare $index to that value and apply a class when they match.

This matters because:

• It keeps your template small and readable.
• It avoids duplicated markup.
• It separates structure from styling.
• It makes updates easier when selection changes.

Instead of rendering two versions of the same li, you render one li and let AngularJS decide whether it should include a class.

This is a common UI pattern in real applications:

• selected menu items
• active tabs
• highlighted search results
• chosen rows in a table
• current step in a wizard

In short, ngClass is the AngularJS tool for dynamic styling based on application state.

Think of each li as a student in a line, and selectedIndex as the number of the student who should wear a badge.

You do not create two copies of every student—one with a badge and one without. Instead, you keep one student and simply ask:

• “Is this the selected one?”
• If yes, give them the badge.
• If no, do nothing.

In AngularJS, ngRepeat gives each item a number ($index), and ngClass decides whether that item gets the CSS "badge" class.

The most common syntax is:

<li ng-repeat="item in items"
    ng-class="{ selected: $index === selectedIndex }">
  {{ item.name }}
</li>

Example

<ul>
  <li ng-repeat="item in items"
      ng-class="{ selected: $index === selectedIndex }">
    {{ item.name }}
  </li>
</ul>

$scope.items = [
  { name: 'Apple' },
  { name: 'Banana' },
  { name: 'Cherry' }
];

$scope.selectedIndex = 1;

.selected {
  background-color: #dbeafe;
  font-weight: bold;
}

What this does

Consider this example:

<ul>
  <li ng-repeat="item in items"
      ng-class="{ selected: $index === selectedIndex }">
    {{ item.name }}
  </li>
</ul>

$scope.items = [
  { name: 'A' },
  { name: 'B' },
  { name: 'C' }
];

$scope.selectedIndex = 2;

Step-by-step

1. AngularJS reads items and starts ngRepeat.
2. For the first item:
   • item.name is A
   • $index is 0
   • condition is 0 === 2, which is false
   • no class is added

Conditional classes are used everywhere in AngularJS interfaces.

Navigation menus

Highlight the current menu item:

<li ng-repeat="link in links"
    ng-class="{ active: $index === selectedIndex }">
  {{ link.label }}
</li>

Tabs

Mark the open tab:

<button ng-repeat="tab in tabs"
        ng-class="{ activeTab: $index === selectedIndex }">
  {{ tab.title }}
</button>

Search results

Emphasize the currently focused result for keyboard navigation.

Data tables

Highlight the selected row in an admin dashboard.

Image galleries

Apply a border to the currently selected thumbnail.

Forms and validation

Add classes like error, valid, or dirty based on state.

In all of these cases, the idea is the same: the class reflects data or UI state.

In real AngularJS projects, developers commonly use ngClass with simple conditions and keep the selection state in the controller.

Common pattern: selected index

<li ng-repeat="item in items"
    ng-class="{ selected: $index === selectedIndex }"
    ng-click="selectedIndex = $index">
  {{ item.name }}
</li>

This is a standard pattern for clickable lists.

Guarding against invalid values

Developers often make sure selectedIndex is valid before using it.

if ($scope.selectedIndex < 0 || $scope.selectedIndex >= $scope.items.length) {
  $scope.selectedIndex = 0;
}

Using item identity instead of index

In larger codebases, developers sometimes track the selected item by ID instead of index, because indexes can change if the list is filtered, sorted, or reordered.

<li ng-repeat=
    =>
  {{ item.name }}

Here are common beginner mistakes when conditionally applying classes in AngularJS.

1. Duplicating markup with ng-show and ng-hide

Not recommended

<li ng-repeat="item in items" ng-show="$index === selectedIndex" class="selected">
  {{ item.name }}
</li>
<li ng-repeat="item in items" ng-hide="$index === selectedIndex">
  {{ item.name }}
</li>

This creates unnecessary duplication and makes templates harder to maintain.

Better

<li ng-repeat="item in items"
    ng-class="{ selected: $index === selectedIndex }">
  {{ item.name }}
</li>

2. Using class for dynamic logic

Broken approach:

Here is how ngClass compares with related AngularJS approaches.

<li ng-repeat="item in items"
    ng-class="{ selected: $index === selectedIndex }">
  {{ item.name }}
</li>

Key points

• Use ngClass for conditional CSS classes.
• Use $index inside ngRepeat.
• Compare $index with selectedIndex.
• Prefer object syntax for readability.

Common forms

Object syntax

ng-class="{ selected: $index === selectedIndex }"

Ternary syntax

ng-class="$index === selectedIndex ? 'selected' : ''"

Multiple classes

ng-class="{ selected: isSelected, disabled: isDisabled }"

Rules

• $index exists only inside ngRepeat.

How do I add a class to one item in an AngularJS ngRepeat?

Use ng-class and compare $index with your selected value.

<li ng-repeat="item in items" ng-class="{ selected: $index === selectedIndex }">

Is ngClass better than ng-show and ng-hide for this?

Yes. ngClass is the correct tool when you want to style an element differently. ng-show and ng-hide are for visibility, not class changes.

What is $index in AngularJS?

$index is a local variable available inside ngRepeat. It contains the current loop position starting from 0.

Can I use a class name string instead of object syntax in ngClass?

• ngRepeat — provides the loop that gives you access to $index.
• ngClass — the main directive for conditional CSS classes.
• ngStyle — useful when you need dynamic inline styles instead of classes.
• ngShow and ngHide — related directives for visibility control.
• ngIf — conditionally adds or removes elements from the DOM.
• Scope in AngularJS — helps explain where selectedIndex and $index come from.
• Data binding — explains how UI updates automatically when state changes.
• Event handling with ngClick — often used to change which item is selected.