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

问题描述

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

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

简化版本如下:

{{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计数器的值.如何在模板中的嵌套循环中获得迭代的总数?

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

推荐答案

您只需使用ng-repeat ...的$index属性即可达到许多价值.

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>

这里正在工作 PLUNKER

更新

经过一段时间和一些评论，我意识到我的代码无法正确计算总迭代次数，因此我进行了一些更改以解决此问题.

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.

我犯了第一个错误，我以为每组事件号都是相等的，第二个错误是如果再次超过2组，它将失败.

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.

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

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,

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

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>

这是最新的 PLUNKER

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