Question

尝试使用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)]，并在父复选框上使用选中/更改的功能来检查所有孩子，即将孩子ngModel设置为true或{{1} }。

EX：

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>

Angular ngModel选中所有复选框

1 个答案: