I'm using Ngfor inside Ngfor for creating multile checkbox from object array, only single check-CodePudding

I'm using ionic angular and creating checkboxes from dynamic data in rows and columns, only single checkbox is getting selected from all.

I want to select only one checkbox from each row and do a total of all the values of all NgModel's

My code snippet...

<ion-row *ngFor="let eachVariation of productDetails.productVariations; let i = index">
        <div *ngFor="let eachVariationOption of productDetails.productVariations[i].variationOptions">
        <ion-col
          size="1.5"
          style="margin-bottom: 0.5em">
           <input
              [(ngModel)]="eachVariationOption.selectedVariation"
              type="radio"
              [value]="eachVariationOption"
              (click)="selectVariation(eachVariation, 'yes')"
            />
          
        </ion-col>
      </div>
      </ion-row>

CodePudding user response：

You have to give the same name the inputs that have to be together in a group.

<input type="radio" name='group_1'/>
<input type="radio" name='group_1'/>
<input type="radio" name='group_2'/>
<input type="radio" name='group_2'/>

will give you 4 radio buttons that are grouped into 2 groups of 2.

In your case you have to name them in the inner loop with something that is available in the outer loop for instance the index or a field that is in the eachVariation object.

<input type="radio" [name]=""eachVariation.name"

Assuming name exists in eachVariation.