选择基于父复选框的父复选框

时间:2019-04-16 08:32:52

标签: angular typescript

当我选择子复选框时,我试图选择一个父复选框。但是问题是我的代码选择了所有的父母复选框。而且我没有为每个类别选择属性。我需要以某种方式使用索引来定位确切的父类别 她的是我的密码。

 <ul class="categories">
              <ng-container *ngFor="let cat of categories; let i = index">
                <li>
                  <input
                    formControlName="parentCat"
                    [checked]="parent"
                    type="checkbox"
                    [value]="cat.name"
                  />
                  {{ cat.name }}
                  <ng-container
                    *ngFor="let sub of cat.sub_categories; let k = index"
                  >
                    <li *ngIf="cat.sub_categories">
                      <input
                        formControlname="childCat"
                        (change)="categoryChange($event, cat)"
                        type="checkbox"
                        value="sub.name"
                      />{{ sub.name }}
                    </li>
                  </ng-container>
                </li>
              </ng-container>
            </ul>

现在这是我的功能

parent: boolean;
categoryChange(event) {
    if (event.target.checked === true) {
      this.parent = true;
    } else {
      this.parent = false;
    }
  }

每个子类别应选择相关的父类别。

1 个答案:

答案 0 :(得分:0)

在这里,“父级”是全局的,您需要设置每个类别的选定项。

https://stackblitz.com/edit/angular-txhnxj