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:
parent
2384082b5c
commit
be954115f8
|
@ -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) {
|
||||||
|
|
|
@ -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();
|
||||||
|
});
|
||||||
|
}));
|
||||||
|
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
Loading…
Reference in New Issue