Angularjs - 如何保持模板中嵌套 ng-repeat 的总迭代次数 [英] Angularjs - How to keep count of total iterations across nested ng-repeat in the template

问题描述

我有一个相当大的对象需要在嵌套的 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}}

{{总事件数 = 0}

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

解决方案

你可以通过使用 ng-repeat 的 $index 属性达到很多价值...

HTML

 
<ul><li ng-repeat="event in eventgroup.events" ng-click="Current(totalEvents)"><div class="event-item-container">{{event.name}} 可以具有唯一值，例如<br/>(outerIndex) * (eventgroup.events.length) + innerIndex<br/>总事件数 = {{outerIndex * eventgroup.events.length + $index}}<br/>内部事件 = {{$index}}

这里正在运行 PLUNKER

更新

经过一段时间和一些评论后，我意识到我的代码没有正确计算总迭代次数，因此我进行了一些更改以修复它.

我以某种方式犯的第一个错误，我认为每组的事件编号都是相等的，如果再次超过 2 组，则第二个失败.

因此，为了跟踪总迭代次数，我在代码中设置了一个名为 totalIterations 的数组.在这个数组中，我设置了迄今为止我们已经迭代的事件总数，

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

<ul><li ng-repeat="event in eventgroup.events"><div class="event-item-container">{{event.name}} 可以具有唯一值，例如<br/>总事件计数 = {{totalIterations[outerIndex- 1] + $index}}<br/>内部事件 = {{$index}}
<button class="btn btn-success" ng-click="Current({{totalIterations[outerIndex- 1] + $index}})">当前事件</button><span ng-repeat-end ng-init="totalIterations[outerIndex] = totalIterations[outerIndex - 1] + eventgroup.events.length"></span>

这里是最新的 PLUNKER

I have a fairly large object that needs to be iterated over in nested ng-repeat loops

A simplified version looks like this:

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

How can I keep track of totalEvents counter value.. How can I get a total number of iterations across nested loops IN the template?

解决方案

you can reach many value just using $index property of ng-repeat...

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>

here is working PLUNKER

UPDATE

After some times and some comments I realized that my code is not calculating total iterations correctly, so I made some changes to fix it.

First mistake I made somehow I thought event numbers will be equals for every set, second one if there are more than 2 sets again it fails.

So for keeping track of total iterations I set an array which is called totalIterations in code. In this array I set total number events we already iterate so far,

For example at the finish of first set it will be length of first event group and for second it will be first and second group, and so on... For achieving this I used ng-repeat-end directive here is the final code

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

and here is latest PLUNKER

这篇关于Angularjs - 如何保持模板中嵌套 ng-repeat 的总迭代次数的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！