AndreaM16 AndreaM16 - 1 year ago 84
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>

Single Item Template That has multiple Radio Buttons:

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

<label for="radio_{{$parent.$index}}">

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
in a separated file.

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

Answer Source

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

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

        <label for="radio_{{outerIndex}}_{{innerIndex}}">

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download