[英]Make select/unselect all functionality in angular 2
I am new to angular 2 & trying to create select/unselect all checkboxes. 我是angular 2的新手,正在尝试创建选择/取消选择所有复选框。 I have a table like this: 我有一张这样的桌子:
<table>
<thead>
<tr>
<th><input type="checkbox" name="selectAll"></th>
<th>Name</th>
<th>Number</th>
</tr>
</thead>
<tbody>
<tr>
<td><input type="checkbox"></td>
<td>abc</td>
<td>9876373773</td>
</tr>
<tr>
<td><input type="checkbox"></td>
<td>abc</td>
<td>9876373773</td>
</tr>
<tr>
<td><input type="checkbox"></td>
<td>abc</td>
<td>9876373773</td>
</tr>
</tbody>
</table>
So if user clicks on selectAll checkbox other checkboxes should get check to. 因此,如果用户单击selectAll复选框,则其他复选框也应选中。 Data is coming dynamically, here is my api call: 数据动态变化,这是我的api调用:
this.contactService.getName(this.pageNumber, this.pageSize)
.subscribe(
data => {
this.contactlist = data.results;
},
err => console.error(err),
() => console.log('Contact list fetched')
);
In Angular2 the preferred way is to bind HTML to a model, update the model and let Angular update the DOM like: 在Angular2中,首选方法是将HTML绑定到模型,更新模型并让Angular更新DOM,例如:
@Component({
selector: 'my-comp',
template: `
<table>
<thead>
<tr>
<th><input type="checkbox" name="selectAll" (click)="toggleAll($event.target.checked)"></th>
<th>Name</th>
<th>Number</th>
</tr>
</thead>
<tbody>
<tr *ngFor="let item of contactlists let i=index">
<td><input type="checkbox" [(ngModel)]="checkedItems[i]"></td>
<td>{{item.name}}</td>
<td>{{item.value}}</td>
</tr>
</tbody>
</table>
`)}
export class MyComponent {
constructor() {
this.contactService.getName(this.pageNumber, this.pageSize)
.subscribe(
data => {
this.contactlist = data.results;
this.checkedItems = new Array(this.contactlist?.length).fill(false);
},
err => console.error(err),
() => console.log('Contact list fetched')
);
}
/* data set dynamically from `contactService` instead according to updated question
items = [
{name: abc, number: 9876373771, checked: false},
{name: def, number: 9876373772, checked: false},
{name: ghi, number: 9876373773, checked: false},
]; */
toggleAll(checked) {
this.items.forEach((item) => item.checked = checked);
}
}
With data-driven table you could achieve this by updating row-model's "checked" flag. 使用数据驱动表,您可以通过更新行模型的“ checked”标志来实现。 For example you could do something like this: 例如,您可以执行以下操作:
<table>
<thead>
<tr>
<th><input type="checkbox" name="selectAll" [checked]="toggle" (change)="toggleAll()"></th>
<th>Name</th>
<th>Number</th>
</tr>
</thead>
<tbody>
<tr *ngFor="let item of items">
<td><input type="checkbox" [checked]="item.checked" (change)="toggleItem(item)"></td>
<td>{{ item.name }}</td>
<td>{{ item.number }}</td>
</tr>
</tbody>
</table>
And then in component: 然后在组件中:
toggle = false
items = [
{ name: 'aaa', number: '3452342343' },
{ name: 'aaa', number: '3452342343' }
]
toggleItem(item) {
item.checked = !item.checked
this.toggle = this.items.every(item => item.checked)
}
toggleAll() {
this.toggle = !this.toggle
this.items.forEach(item => item.checked = this.toggle)
}
Note that this is important that you also handle cases when you check all checkboxes manually and it should automatically check checkAll checkbox. 请注意,这对于您在手动选中所有复选框时也要处理情况非常重要,它应该自动选中checkAll复选框。 And vise versa. 反之亦然。
Demo: http://plnkr.co/edit/Nw8Wk0kXSbQLkAE7yW0e?p=info 演示: http : //plnkr.co/edit/Nw8Wk0kXSbQLkAE7yW0e?p = info
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.