Angular ngModel 检查所有复选框 [英] Angular ngModel checks all checkboxes

问题描述

尝试使用 ngModel 选中/取消选中所有子复选框并选中所有复选框，但也尝试单独选中子项并且始终选中所有复选框；

<input type="checkbox" [checked]="myVar1" (change)="myVar1 = !myVar1"/>家长
<ul><input type="checkbox" [(ngModel)]="myVar1"/>儿童1<input type="checkbox" [(ngModel)]="myVar1"/>孩子2

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

 
<input type="checkbox" [checked]="myVar2" (change)="myVar2 = !myVar2"/>家长
<ul><input type="checkbox" [(ngModel)]="myVar2" [ngModelOptions]="{standalone: true}"/>儿童1<input type="checkbox" [(ngModel)]="myVar2" [ngModelOptions]="{standalone: true}"/>孩子2

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

解决方案

您对 child 和 parent 使用相同的 [(ngModel)] 这使得在检查 parent 时立即检查 child.

您需要为孩子设置不同的 [(ngModel)] 并在父复选框上使用选中/更改的函数来检查所有孩子，即设置孩子 ngModeltrue 或 false.

例如:

<input type="checkbox" [checked]="myVar1" (change)="updateChildSelection($event)"/>家长
<ul><input type="checkbox" [(ngModel)]="myVarChild1"/>儿童1<input type="checkbox" [(ngModel)]="myVarChild2"/>孩子2

在组件中:

updateChildSelection(event) {//如果选中，则将 child 设置为 true如果(事件.目标.检查){this.myVarChild1 = true;this.myVarChild2 = 真} 别的 {//设置子模型为false}}

Trying to check/uncheck all children checkboxes using ngModel and all checkboxes are checked, but also trying to check alone children and all checkboxes are always checked;

<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>

Tried using [ngModelOptions]="{standalone: true}" property and it results with the same behaviour - all checkboxes are checked;

 <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>

How to make every child checkbox standalone? stackblitz

解决方案

You are using the same [(ngModel)] for child and parent which makes the child checked as soon as parent is checked.

You need to have different [(ngModel)] for children and use a checked/changed function on parent checkbox to do the check all child i.e set child ngModel to true or false.

EX:

<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>

In component:

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 检查所有复选框的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！