honeymoose
/
angular-cn
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

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 #4181
This commit is contained in:
Ted Sander 2015-09-14 14:07:59 -07:00
parent db098650ee
commit a15b679494
2 changed files with 40 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
modules/angular2/src/core/directives/ng_for.ts
View File

@ -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[] {

38
modules/angular2/test/core/directives/ng_for_spec.ts
View File

@ -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();
});
}));
});
}