Saroj Maharjan
Saroj Maharjan

Reputation: 97

handle radio button behavior in multiple loop

I am having trouble in controlling the behavior of multiple radio select in multiple for loop.

In below demo, when I check radio of 1st block it is selecting the same radio in 2nd block too. Please have a look. Actually I need to select different radio option in different blocks.

demo: http://plnkr.co/edit/YpQZyv55tKxTGwDEi5gS?p=preview

Upvotes: 1

Views: 417

Answers (2)

ambussh
ambussh

Reputation: 790

Change in template

<div *ngFor="let a of abc; let i = index" >
  <p>{{a}}</p>
  <div *ngFor="let enum of enum_details; let e = index">
    <label for="enum{{i+1}}{{e + 1}}">
      <input id="enum{{i+1}}{{e+1}}" [value]='enum.name' type="radio" name="enums{{i+1}}{{e+1}}" [(ngModel)]="radioSelected[i]">
      {{enum.name}}
    </label>
  </div>
</div>

and change in component

radioSelected:string[] = []

At now you got you value in radioSelected array (radioSelected[0] for first radio bloc and radioSelected[ 1] for second block)

Plunker

Upvotes: 1

Santosh Shinde
Santosh Shinde

Reputation: 6063

Working Plunker


You have to change name of your input based on parent index and child index.

Example : name="enums{{i+1}}{{e+1}}"

Then you need to create a dynamic model based on parent index

Example : radioSelected[i]

And replace radioSelected:any; by radioSelected:string[] = []; in your component.

So use following code in your template,

 <input id="enum{{i+1}}{{e+1}}" [value]='enum.name' type="radio" name="enums{{i+1}}{{e+1}}" [(ngModel)]="radioSelected[i]">

You will get your input selected value in radioSelected[index]

Where index will be 0..n.

Example: If you have selected value of hello loop is Kumar then you will access this.radioSelected[0] in your component to get this value.

Hopes this will help you !!

Upvotes: 1

Related Questions