Question

我遇到了一个问题，我无法用其他相关的SO Q / A来解决。

这是我的情况：

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

我能够正确地看到每个项目都有自己的按钮，但是我无法在点击时选择正确的按钮。

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

我希望获得与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>

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

初学者情况，例如有两个项目：

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

尝试与第二项互动：

它与第一个相同，对于所有其他项目也是如此。

我真的不明白为什么它不像Plunker那样正常工作。我使用完全相同的代码制作了Plunker，但包括单个项目的布局，ng-include位于单独的文件中。

我做错了什么，怎么解决这个问题？是由ng-include？

引起的

Answer 1

问题似乎是我们尝试使用相同的单选按钮id，同时重复第1项到第n项。让索引从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....

所以我们需要从第一次重复这样的

获取项目索引

<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

1 个答案: