Angularjs-如何保持模板中嵌套ng repeat的总迭代次数

我有一个相当大的对象，需要在嵌套的ng repeat循环中进行迭代

简化版本如下所示：

{{totalEvents = 0}}
<div ng-repeat="(mainIndex, eventgroup) in EventsListings">

<ul>
    <li ng-repeat="event in eventgroup.events" ng-click="Current(totalEvents)">

    <div class="event-item-container" ng-show="eventDetailsView[totalEvents]">
        {{totalEvents = totalEvents + 1}}
    </div>

   </li>

</ul>

</div>
{{totalEvents = 0}

{{totalEvents=0}


{{totalEvents=totalEvents+1}}


{{totalEvents=0}

---

如何跟踪totalEvents计数器值。如何获取模板中嵌套循环的总迭代次数？

如果确实希望模板驱动此计算，可以在控制器中保留一个计数器并创建一个递增该计数器的函数。然后从模板调用该函数

---

不过，老实说，将这种逻辑放在视图中似乎很奇怪。在控制器中用纯Javascript进行递归计数会更有意义。

只需使用

ng repeat

的

$index

属性就可以获得很多值

HTML

  <div ng-repeat="eventgroup in EventsListings" ng-init="outerIndex = $index">
    <ul>
      <li ng-repeat="event in eventgroup.events" ng-click="Current(totalEvents)">

        <div class="event-item-container">
          {{event.name}} can have unique value like 
          <br/>(outerIndex) * (eventgroup.events.length) + innerIndex
          <br/>Total Events = {{outerIndex * eventgroup.events.length + $index}}
          <br/>Inner Events = {{$index}}
        </div>

      </li>
    </ul>
  </div>

{{event.name}}可以具有唯一值，如

（outerIndex）*（eventgroup.events.length）+innerIndex

事件总数={{outerIndex*eventgroup.Events.length+$index}

内部事件={{$index}

这里有工作

更新

经过一段时间和一些注释，我意识到我的代码没有正确地计算总迭代次数，所以我做了一些更改来修复它

我犯的第一个错误是，我认为每一组的事件数都是相等的，第二个错误是，如果有两组以上的事件再次发生，它就会失败

因此，为了跟踪总迭代次数，我在代码中设置了一个名为总迭代次数的数组。在这个数组中，我设置了到目前为止我们已经迭代的事件总数

例如，在第一盘结束时，它是第一个事件组的长度，第二盘是第一和第二组的长度，依此类推……为了实现这一点，我使用了ng repeat end指令，这里是最终代码

<div ng-repeat="eventgroup in EventsListings" ng-init="outerIndex = $index">
    <ul>
      <li ng-repeat="event in eventgroup.events">

        <div class="event-item-container">
          {{event.name}} can have unique value like
          <br/>Total Events Count = {{totalIterations[outerIndex- 1] + $index}}
          <br/>Innder Events = {{$index}}
        </div>

        <button class="btn btn-success" ng-click="Current({{totalIterations[outerIndex- 1] + $index}})">Current Event</button>

      </li>
      <span ng-repeat-end ng-init="totalIterations[outerIndex] = totalIterations[outerIndex - 1] + eventgroup.events.length"></span>
    </ul>
  </div>

{{event.name}}可以具有唯一值，如

事件总数={{totalIterations[outerIndex-1]+$index}

Innder Events={{{$index}
时事

---

下面是最新的

我想提出不同的方法来解决这个问题，我认为这很酷也很简单：

在模板中：

<ul>
  <div ng-repeat="group in obj.objectGroups">
    <li>{{group.name}}</li>
    <li ng-repeat="item in group.items" ng-init="number = countInit()">    
      Total = {{number + 1}}
    </li>
  </div>
</ul>

---

您需要索引吗？这是什么条件？ng show=“eventDetailsView[totalEvents]”和此ng click=“Current（totalEvents）”？告诉你的目标我们共享你的js或创建plunker…我需要为ng show切换true和false，为我悬停的元素切换true和false。我的问题是，对于内部迭代重复的重复索引的每个外部迭代，我似乎无法隔离我结束的项目。我正在尝试为每个迭代附加完全独特的内容。。我确信我也遗漏了一些明显的东西：/I我正在尝试将一些完全独特的东西附加到每个迭代中。我认为我也遗漏了一些明显的东西，这很简单。谢谢你，这很有帮助，我需要更多地了解我可以在模板中做的事情。我感谢你的帮助。顺便说一下，你的plunker无法正确计算总迭代次数，如果事件中的元素长度不相同，则逻辑会给出混乱的结果请尝试@GRowing comment中的上述链接

$scope.totalCount = 0;
$scope.countInit = function() {
   return $scope.totalCount++;
}