feat(ng_for): Add Even and Odd variables to ng_for

Add even and odd local variables to ng_for to allow developers to style table rows differently and other features. Closes angular#4181

Author: TedSander

modules/angular2/src/core/directives/ng_for.ts

@@ -90,6 +90,8 @@ export class NgFor implements DoCheck {
  private _perViewChange(view, record) {
  view.setLocal('\$implicit', record.item);
  view.setLocal('index', record.currentIndex);
+ view.setLocal('even', (record.currentIndex % 2 == 0));
+ view.setLocal('odd', (record.currentIndex % 2 == 1));
  }
 
  static bulkRemove(tuples: RecordViewTuple[], viewContainer: ViewContainerRef): RecordViewTuple[] {

modules/angular2/test/core/directives/ng_for_spec.ts

@@ -271,6 +271,44 @@ export function main() {
  });
  }));
 
+ it('should display even items correctly',
+ inject([TestComponentBuilder, AsyncTestCompleter], (tcb: TestComponentBuilder, async) => {
+ var template =
+ '<div><copy-me template="ng-for: var item of items; var isEven=even">{{isEven.toString()}}</copy-me></div>';
+
+ tcb.overrideTemplate(TestComponent, template)
+ .createAsync(TestComponent)
+ .then((rootTC) => {
+ rootTC.debugElement.componentInstance.items = [0, 1, 2];
+ rootTC.detectChanges();
+ expect(rootTC.debugElement.nativeElement).toHaveText('truefalsetrue');
+
+ rootTC.debugElement.componentInstance.items = [2, 1];
+ rootTC.detectChanges();
+ expect(rootTC.debugElement.nativeElement).toHaveText('truefalse');
+ async.done();
+ });
+ }));
+
+ it('should display odd items correctly',
+ inject([TestComponentBuilder, AsyncTestCompleter], (tcb: TestComponentBuilder, async) => {
+ var template =
+ '<div><copy-me template="ng-for: var item of items; var isOdd=odd">{{isOdd.toString()}}</copy-me></div>';
+
+ tcb.overrideTemplate(TestComponent, template)
+ .createAsync(TestComponent)
+ .then((rootTC) => {
+ rootTC.debugElement.componentInstance.items = [0, 1, 2, 3];
+ rootTC.detectChanges();
+ expect(rootTC.debugElement.nativeElement).toHaveText('falsetruefalsetrue');
+
+ rootTC.debugElement.componentInstance.items = [2, 1];
+ rootTC.detectChanges();
+ expect(rootTC.debugElement.nativeElement).toHaveText('falsetrue');
+ async.done();
+ });
+ }));
+
  });
 }