Improve this Doc  View Source

ngClassOdd

  1. - directive in module ng

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

Usage

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/);
});