How do you target the visible items in an ngFor list
I have a table of data. Each row has a checkbox that can be selected for a bulk operation on that row. The table can be filtered by various filter mechanisms which are applied to the ngFor using a custom pipe. There is a header row with a checkbox to select all. Currently if I click that it selects all items in the table irrespective of the filter. I would like to be able to target only the visible items.
I have a "hack" in the checkAll() handler where I iterate over the full list and reapply the filters but was hoping for a more elegant / integrated solution.
In my view
<table>
<tr>
<th><input type="checkbox" [(ngModel)]="allCheck" (click)="selectAll()"></th>
<th>Name</th>
</tr>
<tr *ngFor="let client of clients|filterTable:searchString:incomplete">
<td><td><input type="checkbox" [(ngModel)]="clientCheck[store.id]"></td>
<td><input [(ngModel)]="client.Name"></td>
</table>
In my pipe (incomplete is a filter for records where Name is blank - we want to filter by those and then select only those).
transform(items: any[], searchString:string, showIncomplete:boolean): any {
if (!items) return [];
if (!showIncomplete && !searchString) return items;
searchString = searchString.toLowerCase();
return items.filter(value => {
if (showIncomplete && value.Name) return false;
return value.Name.toLowerCase().indexOf(searchString);
})
}
In my controller
ngOnInit() {
// assume svc is the injected clientService
this.svc.getClients()
.subscribe(clients => this.clients = clients);
}
selectAll() {
// Is there a way to get access to the list of items here
// that are actually being displayed?
}
Aucun commentaire:
Enregistrer un commentaire