feat(NgFor): $last property support

Makes a new `$last` property available during the loop with a boolean
showing if it's the last item in the iteration.

closes: #3102

Closes #3991
This commit is contained in:
Alfonso Presa 2015-09-04 16:59:04 +02:00 committed by Alfonso Presa
parent 2384082b5c
commit be954115f8
2 changed files with 25 additions and 1 deletions

View File

@ -9,7 +9,8 @@ import {isPresent, isBlank} from 'angular2/src/core/facade/lang';
* to the current item from the iterable. * to the current item from the iterable.
* *
* It is possible to alias the `index` to a local variable that will be set to the current loop * It is possible to alias the `index` to a local variable that will be set to the current loop
* iteration in the template context. * iteration in the template context, and also to alias the 'last' to a local variable that will
* be set to a boolean indicating if the item is the last one in the iteration
* *
* When the contents of the iterator changes, `NgFor` makes the corresponding changes to the DOM: * When the contents of the iterator changes, `NgFor` makes the corresponding changes to the DOM:
* *
@ -76,6 +77,10 @@ export class NgFor {
for (var i = 0; i < insertTuples.length; i++) { for (var i = 0; i < insertTuples.length; i++) {
this._perViewChange(insertTuples[i].view, insertTuples[i].record); this._perViewChange(insertTuples[i].view, insertTuples[i].record);
} }
for (var i = 0, ilen = this.viewContainer.length; i < ilen; i++) {
this.viewContainer.get(i).setLocal('last', i === ilen - 1);
}
} }
private _perViewChange(view, record) { private _perViewChange(view, record) {

View File

@ -252,6 +252,25 @@ export function main() {
}); });
})); }));
it('should display last item correctly',
inject([TestComponentBuilder, AsyncTestCompleter], (tcb: TestComponentBuilder, async) => {
var template =
'<div><copy-me template="ng-for: var item of items; var isLast=last">{{isLast.toString()}}</copy-me></div>';
tcb.overrideTemplate(TestComponent, template)
.createAsync(TestComponent)
.then((rootTC) => {
rootTC.componentInstance.items = [0, 1, 2];
rootTC.detectChanges();
expect(rootTC.nativeElement).toHaveText('falsefalsetrue');
rootTC.componentInstance.items = [2, 1];
rootTC.detectChanges();
expect(rootTC.nativeElement).toHaveText('falsetrue');
async.done();
});
}));
}); });
} }