在 Angular 中实现全选/取消全选复选框可以通过以下步骤完成:
CheckboxComponent
的组件,用于展示复选框和处理全选/取消全选逻辑。checkbox.component.html:
checkbox.component.ts:
import { Component, Input } from '@angular/core';
@Component({
selector: 'app-checkbox',
templateUrl: './checkbox.component.html',
styleUrls: ['./checkbox.component.css']
})
export class CheckboxComponent {
@Input() checkboxes: any[] = [];
isChecked: boolean = false;
toggleAllCheckboxes(): void {
for (let checkbox of this.checkboxes) {
checkbox.checked = this.isChecked;
}
}
}
CheckboxComponent
并传递复选框的数据列表。parent.component.html:
-
{{ checkbox.label }}
parent.component.ts:
import { Component } from '@angular/core';
@Component({
selector: 'app-parent',
templateUrl: './parent.component.html',
styleUrls: ['./parent.component.css']
})
export class ParentComponent {
checkboxes: any[] = [
{ label: 'Checkbox 1', checked: false },
{ label: 'Checkbox 2', checked: false },
{ label: 'Checkbox 3', checked: false }
];
}
这是一个简单的实现示例,你可以根据自己的需求进行更改和优化。