Tutorials References Exercises Videos Menu
Create Website Get Certified Upgrade

AngularJS ng-class-odd Directive


Example

Set class="striped" for every other (odd) table row:

<table ng-controller="myCtrl">
<tr ng-repeat="x in records" ng-class-odd="'striped'">
    <td>{{x.Name}}</td>
    <td>{{x.Country}}</td>
</tr>
</table>
Try it Yourself »

Definition and Usage

The ng-class-odd directive dynamically binds one or more CSS classes to an HTML element, but will take effect only on every other (odd) appearance of the HTML element.

The ng-class-odd directive will only work if it is used together with the ng-repeat directive.

The ng-class-odd directive is perfect for styling items in a list or rows in a table, but it can be used on any HTML element.


Syntax

<element ng-class-odd="expression"></element>

Supported by all HTML elements.


Parameter Values

Value Description
expression An expression that returns one or more class names.