AngularJS ng-class-odd directive

Definition and Usage

ng-class-odd Instructions dynamically bind one or more CSS classes to HTML elements, but they take effect only on every odd occurrence of the HTML element.

ng-class-odd Instructions are only effective when combined with ng-repeat is effective only when used together with the directive.

ng-class-odd The directive is very suitable for setting styles for items in a list or rows in a table, but it can be used for any HTML element.

Example

Set class="striped" for every other row (odd rows) of the 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

Syntax

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

All HTML elements support this.

Parameters