How to assign alternate class to rows in Angular JS?

Question

I want to assign alternate class to rows in a table. I am using ng-repeat on

<tr ng-repeat="event in events">

I want to get output like this:

<tr class="odd">...</tr>
<tr class="event">....</tr>

I've tried this (doesn't work):

<tr ng-repeat="event in events" class="$index % 2 == 0? 'event' : 'odd'">

I can't get it to work. Also it seems like Angular is using 'class' attribute to. Why is it doing so? Can I tell AngularJS not to use the class attribute for internal evaluations?

Please help. Thanks!

This may not be a direct answer to your question, but have a look at [CSS even and odd rules](http://www.w3.org/Style/Examples/007/evenodd.en.html). If you can use those, then you don't need to use classes. — Travesty3, Aug 29 '12 at 13:48
Thanks! But doesn't actually answer my question(s). :-) Thanks anyways. — S Gupta, Aug 29 '12 at 13:51
If you're going to build out a table, you might want to check out http://angular-ui.github.com/ng-grid It's a full-featured angularjs grid we have been working on for the last month. — timothyswt, Dec 08 '12 at 06:29

score 93 · Accepted Answer · edited Dec 24 '22 at 06:07

93

You should be using the angular directives ngClassEven and ngClassOdd for this.

Have a look at the documentation section for how to use them

http://docs.angularjs.org/api/ng.directive:ngClassEven

http://docs.angularjs.org/api/ng.directive:ngClassOdd

edited Dec 24 '22 at 06:07

starball

20,030
7
43
238

answered Aug 29 '12 at 14:01

ganaraj

26,841
6
63
59

11

You could also have done ng-class="$index % 2 == 0 && 'even' || 'odd'". Angular expressions don't have ternary operators, but you can use the and/or. – Andrew Joslin Aug 29 '12 at 15:33
9

Another options: [`ng-class="['even', 'odd'][$index %2]"`](http://jsfiddle.net/rvKqg/), [`class="{{['even', 'odd'][$index %2]}}"`](http://jsfiddle.net/rvKqg/1/) – Artem Andreev Aug 29 '12 at 17:43
1

Note: // ng-class="$index % 2 == 0 && 'even' || 'odd'" // approach is slightly more flexible, because it preserves the row-striping even when a filter is applied to the data. – dreftymac Dec 11 '14 at 14:04
AngularJS Expressions very much DO have ternary expressions. I use them all the time. – PKD Oct 19 '16 at 21:01

score 21 · Answer 2 · answered Oct 01 '14 at 09:48

21

From the Angular docs..

Use ng-class-odd ng-class-even

<li ng-repeat="name in names">
  <span ng-class-odd="'odd'" ng-class-even="'even'">
    {{name}}
  </span>
</li>

answered Oct 01 '14 at 09:48

Fintan Kearney

743
7
15

JsAndDotNet · Answer 3 · 2015-07-28T22:33:25.520

As @ganaraj states ng-class-odd and ng-class-even are the right way to do this, but for the benefit of searchers, your initial proposal wasn't far off working in Angular >=1.2.19.

Here is a closely related example of something that would have worked and would also work if coloring more than alternate rows (e.g. every 3 rows):

<div>
<style>
    .color0 {
        background-color: lightblue;
    }

    .color1 {
        background-color: lightyellow;
    }

    .color2 {
        background-color: lightgray;
    }
</style>


<div ng-repeat="result in results" ng-class="'color' + ($index % 3)">
    <div>
        <p>{{result.myText}}</p>
    </div>
</div>

score 6 · Answer 4 · answered Oct 30 '14 at 08:34

You can also use the ng-class-odd and ng-class-even directives directly within the ng-repeat directive.

<div class="cssOneProductRecord" 
   ng-repeat='..' 
   ng-class-odd="'cssProductOdd'" 
   ng-class-even="'cssProductEven'" >

Which gives us nice alternating classes for each row:

enter image description here

This example is taken from the following page, which also demonstrates how to turn JSON data into a friendly, responsive Master-View page:

Master-Views using AngularJS

enter image description here

score 0 · Answer 5 · answered Jan 31 '19 at 16:09

Improving Fintan Kearney's answer,

From: https://docs.angularjs.org/api/ng/directive/ngClassOdd

Style.css

.odd {
  color: red;
}
.even {
  color: blue;
}

index.html

<ol ng-init="names=['John', 'Mary', 'Cate', 'Suz']">
  <li ng-repeat="name in names">
   <span ng-class-odd="'odd'" ng-class-even="'even'">
     {{name}}
   </span>
  </li>
</ol>

How to assign alternate class to rows in Angular JS?

5 Answers5

Linked