如何解决如何使用ngFor和ngIf选择Angular中的所有复选框?
我想选择Angular中的所有复选框,在激活“ Seleccionar todo(全选)”时我有ngFor和ngIf,并且所有月份的复选框都已激活。月份存储在数组中。
<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
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。