AndreaM16 AndreaM16 - 6 months ago 18
AngularJS Question

Multiple radio buttons inside multiple repeated items - AngularJS

I've a problem that I was't able to solve with other related SO Q/A.

This is my situation:


  • Item in Items -> multiple repeated items (using ng-repeat)


    • each item has n buttons (using ng-repeat)




I'm able to see correctly every Item with its own buttons but I'm not able to select the right button on click.

When I click on a button outer than first Item's buttons, the event does not work properly, it triggers events on the first item.

I would like to achieve the same result as in this Plunker I just made.

Here is my original code:

Template that includes a Single Item Template per each Item:

<div class="myClass" ng-repeat="item in items">
<div ng-include src="mySingleElement"></div>
</div>


Single Item Template That has multiple Radio Buttons:

<ul>
<li ng-repeat = "button in survey.buttons">
<input type="radio" id="radio_{{$parent.$index}}"
name="radio{{$parent.$index}}""/>

<label for="radio_{{$parent.$index}}">
<span></span>{{button.text}}
</label>
</li>
</ul>


Here are some images where I show the behaviour in my application:

Starter situation, e.g. with two items:

In the first item, I'm able to click only the first radio button, if I click on other buttons they always check the first one.

I'm able to click only the first radio button, if I click on others they won't work

Trying to interact with the second Item:

It happens the same thing as in the first one, same for all other items.

enter image description here


I don't really get why it does not work properly like in the Plunker.
I made the Plunker with the exact same code but including single
item's layout with
ng-include
in a separated file.


What Am I doing wrong and how can I solve this? Is it caused by the
ng-include
?

Answer

Problem seems to be that we are trying to use same radio buttons id while repeating for item1 to item n.Let say index start from 1.

For example

Item 1 -> radio_1,radio_2,radio_3....
Item 2 ->radio_1,radio_2,radio_3...
Item 3 ->radi0_1,radio_2,radio_3...

But To do it correctly we need to

Item 1 ->radio_1_1,radio_1_2,radio_1_3...
Item 2 ->radio_2_1,radio_2_2,radio_2_3.... 
Item 3 ->radio_3_1,radio_3_2,radio_3_3....

So we need get hold of item index from first ng repeat like this

<div class="myClass" ng-repeat="item in items" ng-init="outerIndex = $index">

Then 2 ng-repeat which will be nested inside first one will be

<ul>
<li ng-repeat = "button in survey.buttons" ng-init="innerIndex = $index">
    <input type="radio" id="radio_{{outerIndex}}_{{innerIndex}}" 
           name="radio{{outerIndex}}_{{innerIndex}}""/>

        <label for="radio_{{outerIndex}}_{{innerIndex}}">
          <span></span>{{button.text}}
        </label>
 </li>

Comments