Mehrere Radiobuttons innerhalb mehrerer wiederholter Objekte - AngularJS

Question

Ich habe ein Problem, das ich mit anderen verwandten SO Q/A nicht lösen konnte.

Dies sind meine Situation:

• Artikel in Einzelteile -> mehr wiederholten Elemente
  • jedes Element hat n-Tasten (mit ng-repeat)
(ng-repeat)

Ich bin in der Lage, jedes Element mit seinen eigenen Tasten richtig zu sehen, aber ich kann nicht die richtige Taste beim Klicken auswählen.

Wenn ich auf eine Schaltfläche außerhalb der Schaltflächen des ersten Elements klicke, funktioniert das Ereignis nicht richtig, es löst Ereignisse auf dem ersten Element aus.

Ich möchte das gleiche Ergebnis wie in this Plunker I just made erreichen.

Hier ist meine Original-Code:

Vorlage, die eine Einzelelementvorlage für jeden Artikel enthält:

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

Single Item Vorlage, die mehrere Radiobuttons hat:

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

Hier sind einige Bilder, in denen ich das Verhalten in meiner Anwendung zeige:

Starter-Situation, z.B. mit zwei Artikeln:

Im ersten Element kann ich nur auf den ersten Radio-Button klicken, wenn ich auf andere Knöpfe klicke, überprüfen sie immer den ersten.

Der Versuch, mit dem zweiten Element zur Interaktion:

Es passiert das gleiche wie in der ersten, für alle anderen Elemente.

ich wirklich nicht bekommen, warum es nicht richtig, wie in dem Plunker funktioniert. Ich habe den Plunker mit genau dem gleichen Code erstellt, aber mit einem einzelnen Artikellayout mit ng-include in einer separaten Datei.

Was mache ich falsch und wie kann ich das lösen? Wird es durch die ng-include verursacht?

Answer 1

Problem scheint zu sein, dass wir versuchen, die selbe radio buttons id zu verwenden, während wir für item1 zu item n wiederholen. Sagen wir, index start von 1.

Zum Beispiel

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

Aber machen Sie es richtig müssen wir

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.... 

Also brauchen wir wie dieses dann

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

halten Elementindex von ersten ng Wiederholung erhalten 2 ng-Wiederholung, die innerhalb der ersten verschachtelt wird

sein

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