ngClassOdd

- directive in module ng

Contents

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

Load online demo

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

Load online demo