如何在 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>

这是我的复选框列表的外观：-

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

Answer 1

Rohit，问题是“你的数据呢？”。 看起来你有一些喜欢

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

这会为您的元素选项添加一个名为检查的新属性，使其为真/假，只需添加 your.html 即可查看

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

好吧，您可以选择一系列认证、高度和宽度，这样您就可以

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 操场上模拟了场景 - 链接

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