在Angular中获得动态创建的复选框选中的值,可以通过以下步骤实现:
*ngFor
指令动态创建复选框,并绑定到一个数组的属性上。例如,假设有一个名为checkboxOptions
的数组,可以使用以下代码创建复选框:<div *ngFor="let option of checkboxOptions">
<input type="checkbox" [value]="option" (change)="onCheckboxChange($event)">
{{ option }}
</div>
selectedOptions
的数组:selectedOptions: any[] = [];
onCheckboxChange
,用于监听复选框的变化,并更新selectedOptions
数组。例如:onCheckboxChange(event: any) {
const checkboxValue = event.target.value;
if (event.target.checked) {
this.selectedOptions.push(checkboxValue);
} else {
const index = this.selectedOptions.indexOf(checkboxValue);
if (index > -1) {
this.selectedOptions.splice(index, 1);
}
}
}
selectedOptions
数组中将包含所有选中的复选框的值。可以在需要的地方使用该数组。这种方法适用于动态创建的复选框,无论是通过循环生成还是通过其他方式生成。它允许您在Angular中轻松获取选中的复选框值。
腾讯云相关产品和产品介绍链接地址:
代码:
<template>
----------------------------------------------------------------------------------------------------------------------
领取专属 10元无门槛券
手把手带您无忧上云