Skip to content

feat(NgFor): $last property support #3991

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Closed
alfonso-presa wants to merge 1 commit into from
Closed

feat(NgFor): $last property support #3991

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
7 changes: 6 additions & 1 deletion modules/angular2/src/core/directives/ng_for.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,7 +9,8 @@ import {isPresent, isBlank} from 'angular2/src/core/facade/lang';
* 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
* 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:
*
Expand Down Expand Up @@ -76,6 +77,10 @@ export class NgFor {
for (var i = 0; i < insertTuples.length; i++) {
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);

@vicb vicb Sep 4, 2015

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

What about doing it in _perViewChange() to avoid having to iterate twice ?

ie view.setLocal('last', record.currentIndex === this.viewContainer.length - 1);

@alfonso-presa alfonso-presa Sep 4, 2015

Copy link
Copy Markdown
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

That was my very first approach, but it made this expect fail because becoming (and also stop being) the last child of the collection is not considered to be a change by the DefaultIterableDiffer (and I think that's fair) and so the item is not included in the insertTuples.

@vicb vicb Sep 4, 2015

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Oh right _perViewChange() is only called on records whose indexes have changed.

then LGTM, thanks.

}
}

private _perViewChange(view, record) {
Expand Down
19 changes: 19 additions & 0 deletions modules/angular2/test/core/directives/ng_for_spec.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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();
});
}));

});
}

Expand Down