角度-复选框唯一选择 [英] Angular - Checkbox unique selection

问题描述

在我的项目中，我创建了 Select/Unselect Checkbox功能.同一页上有多个不同复选框.如何分隔全选复选框功能，使其仅应用于其值.

In my project I have created Select/ Unselect Checkbox functionality. There are multiple different checkbox on same page. How can I separate Select All Checkbox functionality so that its only applied to its values.

演示代码 https://stackblitz.com/edit/angular-material-select-all-bx4qen?file = src％2Fapp％2Fapp.component.html

注意-我的项目中至少有8个这样的单独复选框.我正在寻找最佳解决方案

Note - There are atleast 8 such separate Checkbox in my project. I am looking for optimal solution

推荐答案

您需要为每个复选框组使用不同的变量.但由于您已经提到了，所以有很多复选框.

you need to have different variable for each check box group. but since you have mentioned that , there are many checkboxes.

这是优化的解决方案.

引入一个表示形式的数组，这样，如果您引入新的复选框，则需要在html上进行任何更改，并且甚至可以将ngModel甚至用于子复选框.

Introduce an array for representation, that way you need to change anything on html if you introduce new checkbox and you can separate ngModel even for sub checkboxes as well.

export class AppComponent {
  selected: boolean = false;
  checkboxes: any = [
    {
      label: "First",
      root: false,
      create: false,
      update: false,
      delete: false
    },
    {
      label: "Second",
      root: false,
      create: false,
      update: false,
      delete: false
    },
    { label: "Third", root: false, create: false, update: false, delete: false }
  ];

  handeClick(checkbox): void {
    checkbox.root = !checkbox.root;
    checkbox.create = checkbox.root;
    checkbox.update = checkbox.root;
    checkbox.delete = checkbox.root;
  }
}

|<div *ngFor="let checkbox of checkboxes">
    <h2>{{checkbox.label}}</h2>
    <mat-checkbox (ngModelChange)="handeClick(checkbox)" [ngModel]="checkbox.root">Check/ Uncheck</mat-checkbox>

    <mat-checkbox [ngModel]="checkbox.create">Create</mat-checkbox>
    <mat-checkbox [ngModel]="checkbox.update">Update</mat-checkbox>
    <mat-checkbox [ngModel]="checkbox.delete">Delete</mat-checkbox>
</div>

这是演示- 查看全文