Angular ngModel 检查所有复选框

Question

尝试 check/uncheck 使用 ngModel 选中所有子复选框并且所有复选框都被选中，但也尝试单独检查子复选框并且始终选中所有复选框；

<div>
    <input type="checkbox" [checked]="myVar1" (change)="myVar1 = !myVar1" /> Parent
  </div>
  <ul>
    <input type="checkbox" [(ngModel)]="myVar1" /> Child1<br>
    <input type="checkbox" [(ngModel)]="myVar1" /> Child2
  </ul>

尝试使用 [ngModelOptions]="{standalone: true}" 属性结果相同 - 所有复选框都被选中；

 <div>
    <input type="checkbox" [checked]="myVar2" (change)="myVar2 = !myVar2" /> Parent
  </div>
  <ul>
    <input type="checkbox" [(ngModel)]="myVar2" [ngModelOptions]="{standalone: true}" /> Child1<br>
    <input type="checkbox" [(ngModel)]="myVar2" [ngModelOptions]="{standalone: true}" /> Child2
  </ul>

如何让每个子复选框都独立？ stackblitz

Answer 1

您对子项和父项使用相同的 [(ngModel)]，这会在检查父项时立即检查子项。

您需要为子项设置不同的 [(ngModel)]，并在父项复选框上使用 checked/changed 函数来检查所有子项，即将子项 ngModel 设置为 true 或false.

前：

<div>
    <input type="checkbox" [checked]="myVar1" (change)="updateChildSelection($event)" /> Parent
  </div>
  <ul>
    <input type="checkbox" [(ngModel)]="myVarChild1" /> Child1<br>
    <input type="checkbox" [(ngModel)]="myVarChild2" /> Child2
  </ul>

在组件中：

updateChildSelection(event) {
  // set child to true if checked
   if(event.target.checked){
    this.myVarChild1 = true;
    this.myVarChild2 = true
   } else {
   //set child model to false 
   }

}

Angular ngModel 检查所有复选框

Angular ngModel checks all checkboxes

angular

angular-ngmodel

angular-forms