Improve this Doc View Source

## Overview

The `ngClassOdd` and `ngClassEven` directives work exactly as ngClass, except they work in conjunction with `ngRepeat` and take effect only on odd (even) rows.

This directive can be applied only within the scope of an ngRepeat.

## Directive Info

- This directive executes at priority level 0.

## Usage

- as attribute:

      <ANY
        ng-class-odd="expression">
      ...
      </ANY>

- as CSS class:

      <ANY class="ng-class-odd: expression;"> ... </ANY>

### Arguments

Param | Type | Details
--- | --- | ---
ngClassOdd | expression | Expression to eval. The result of the evaluation can be a string representing space delimited class names or an array.

## Animations

Animation | Occurs
--- | ---
addClass | just before the class is applied to the element
removeClass | just before the class is removed from the element

Click here to learn more about the steps involved in the animation.

## Examples

    <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>

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

    it('should check ng-class-odd and ng-class-even', function() {
      expect(element(by.repeater('name in names').row(0).column('name')).getAttribute('class')).
        toMatch(/odd/);
      expect(element(by.repeater('name in names').row(1).column('name')).getAttribute('class')).
        toMatch(/even/);
    });

An example on how to implement animations using `ngClassOdd`:

    <div ng-init="items=['Item 3', 'Item 2', 'Item 1', 'Item 0']">
      <button ng-click="items.unshift('Item ' + items.length)">Add item</button>
      <hr />
      <table>
        <tr ng-repeat="item in items" ng-class-odd="'odd'">
          <td>{{ item }}</td>
        </tr>
      </table>
    </div>

    .odd {
      background: rgba(255, 255, 0, 0.25);
    }

    .odd-add, .odd-remove {
      transition: 1.5s;
    }

    it('should add new entries to the beginning of the list', function() {
      var button = element(by.buttonText('Add item'));
      var rows = element.all(by.repeater('item in items'));

      expect(rows.count()).toBe(4);
      expect(rows.get(0).getText()).toBe('Item 3');
      expect(rows.get(1).getText()).toBe('Item 2');

      button.click();

      expect(rows.count()).toBe(5);
      expect(rows.get(0).getText()).toBe('Item 4');
      expect(rows.get(1).getText()).toBe('Item 3');
    });

    it('should add odd class to odd entries', function() {
      var button = element(by.buttonText('Add item'));
      var rows = element.all(by.repeater('item in items'));

      expect(rows.get(0).getAttribute('class')).toMatch(/odd/);
      expect(rows.get(1).getAttribute('class')).not.toMatch(/odd/);

      button.click();

      expect(rows.get(0).getAttribute('class')).toMatch(/odd/);
      expect(rows.get(1).getAttribute('class')).not.toMatch(/odd/);
    });