如何在 Angular 中获取动态创建的复选框列表选定值？

Question

这是我动态创建的复选框列表

<span *ngFor="let name of _category">
<span class="TextMaroonBold"> {{name.AliasName}}</span>
<div class="ex1">
<span *ngFor="let option of name.arrOptions" class="checkbox">

        <div class="form-check" style="padding-left: 35px;">
            <input class="form-check-input" type="checkbox" (change)="changed(evt)" name="exampleRadios" id={{name.DisplayOrder}} value="{{option.options}}">
            <label class="form-check-label" for="exampleRadios1">
                {{option.options}}
            </label>
        </div>

</span>

这是我的复选框列表的样子:-

现在我想要的是获取复选框列表 name/ID 及其选定的值。例如。如果我在 "certification" 复选框中选择了一些值，我应该得到复选框列表的名称，即 Certification 及其选择的值。

Answer 1

Rohit，问题是"what about your data?"。看起来你有点像

_category=[
   {
     name:"Certification"
     arrOptions:[{options:"Current"},{options:"Process"}..]
   }, 
   {
     name:"Heigth"
     arrOptions:[{options:"50-80 cm"},{options:"81-120 cm"}..]
   },
   ... 
]

您可以简单地在我们的输入中使用 [(ngModel)]

<input class="form-check-input" type="checkbox" [(ngModel)]="option.checked"
 name="exampleRadios" id={{name.DisplayOrder}} >

这会在您的元素选项中添加一个新的属性名为 checked 使其成为 true/false，只需添加您的 .html 即可看到它

<pre>
{{_category|json}}
</pre>

嗯，你可以得到一个Certification，Heigth和Width的数组，这样你就可以做

const certifications=_category[0].arrOptions.filter(o=>o.checked).map(o=>o.options)
const heigths=_category[1].arrOptions.filter(o=>o.checked).map(o=>o.options)
const widths=_category[2].arrOptions.filter(o=>o.checked).map(o=>o.options)

Answer 2

我已经在这个 stackblitz 操场上模拟了场景 - link

它会动态显示您对底部 pre 标记中的复选框所做的更改。希望能帮助到你。 --谢谢

如何在 Angular 中获取动态创建的复选框列表选定值？

How to get dynamically created checkbox list selected values in Angular?

jquery

css

angular

mean-stack