如何使用 ngFor 和 ngIf select Angular 中的所有复选框?
How to select all checkboxes in Angular with ngFor and ngIf?
我想 select Angular 中的所有复选框,激活“Seleccionar todo (Select all)”时我有 ngFor 和 ngIf 以及月份的所有复选框被激活。月份存储在数组中。
HTML representation
<div class="form-group row">
<label class="col-2 col-form-label">Meses de siembra</label>
<div class="col-8">
<table>
<tr>
<label>
<input type="checkbox" ng-model name="seleccionarTodo"> Seleccionar todo
</label>
</tr>
<tr>
<td>
<div *ngFor="let m of mesesSiembra; let i=index">
<label *ngIf="i<6">
<input type="checkbox" ng-model name="mes1a6"> {{m.nombre}}
</label>
</div>
</td>
<td>
<div *ngFor="let m of mesesSiembra; let i=index">
<label *ngIf="i>5">
<input type="checkbox" ng-model name="mes7a12"> {{m.nombre}}
</label>
</div>
</td>
</tr>
</table>
</div>
</div>
mesesSiembra 中的每个 m 都需要有一个布尔值 属性 表示复选框的选中状态,并将其与 [checked]="m.checked"
和 (click)="m.checked = !m.checked"
绑定。您还需要为每个表单元素取一个唯一的名称,因此请使用索引使名称唯一 [name]="'mes_' + i"
.
要检查所有这些,你有一个功能
this.mesesSiembra = this.mesesSiembra.map(m => ({ ...m, checked: true }));
这是一个演示 https://stackblitz.com/edit/angular-ivy-ibqzjj?file=src%2Fapp%2Fapp.component.html
我想 select Angular 中的所有复选框,激活“Seleccionar todo (Select all)”时我有 ngFor 和 ngIf 以及月份的所有复选框被激活。月份存储在数组中。
HTML representation
<div class="form-group row">
<label class="col-2 col-form-label">Meses de siembra</label>
<div class="col-8">
<table>
<tr>
<label>
<input type="checkbox" ng-model name="seleccionarTodo"> Seleccionar todo
</label>
</tr>
<tr>
<td>
<div *ngFor="let m of mesesSiembra; let i=index">
<label *ngIf="i<6">
<input type="checkbox" ng-model name="mes1a6"> {{m.nombre}}
</label>
</div>
</td>
<td>
<div *ngFor="let m of mesesSiembra; let i=index">
<label *ngIf="i>5">
<input type="checkbox" ng-model name="mes7a12"> {{m.nombre}}
</label>
</div>
</td>
</tr>
</table>
</div>
</div>
mesesSiembra 中的每个 m 都需要有一个布尔值 属性 表示复选框的选中状态,并将其与 [checked]="m.checked"
和 (click)="m.checked = !m.checked"
绑定。您还需要为每个表单元素取一个唯一的名称,因此请使用索引使名称唯一 [name]="'mes_' + i"
.
要检查所有这些,你有一个功能
this.mesesSiembra = this.mesesSiembra.map(m => ({ ...m, checked: true }));
这是一个演示 https://stackblitz.com/edit/angular-ivy-ibqzjj?file=src%2Fapp%2Fapp.component.html