多个重复项中的多个单选按钮 - AngularJS

Question

我有一个问题无法通过其他相关的 SO 解决 Q/A。

这是我的情况：

项目中的项目 -> 多个重复项目（使用 ng-repeat）
- 每个项目都有 n 个按钮（使用 ng-repeat）

我能够正确地看到每个项目都有自己的按钮，但我无法 select 单击正确的按钮。

当我点击第一个项目按钮外的按钮时，事件无法正常工作，它触发第一个项目上的事件。

我想获得与 this Plunker I just made 相同的结果。

这是我的原始代码：

包含每个项目的单个项目模板的模板：

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

具有多个单选按钮的单项模板：

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

以下是我在应用程序中展示行为的一些图像：

初始情况，例如有两项：

在第一项中，我只能点击第一个单选按钮，如果我点击其他按钮，它们总是选中第一个。

正在尝试与第二个项目互动：

它发生的事情与第一个相同，所有其他项目也相同。

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.

我做错了什么，我该如何解决？是不是ng-include?

引起的

Answer 1

问题似乎是我们在重复 item1 到 item 时尝试使用相同的单选按钮 ID n.Let 说索引从 1 开始。

例如

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

但要正确地做到这一点，我们需要

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

所以我们需要像这样从第一个 ng repeat 开始获取项目索引

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

然后嵌套在第一个中的 2 ng-repeat 将是

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

多个重复项中的多个单选按钮 - AngularJS

Multiple radio buttons inside multiple repeated items - AngularJS

radio-button

angularjs

angularjs-ng-repeat

angularjs-ng-include