Angularjs - How to keep count of total iterations across nested ng-repeat in the template

Question

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?

do you need indexes? what is this condition for ? ng-show="eventDetailsView[totalEvents]" ? and this ng-click="Current(totalEvents)"? tell your goal our share your js or create plunker... — Poyraz Yilmaz
– Poyraz Yilmaz, Commented Mar 27, 2014 at 5:56
I need to toggle true and false for ng-show,, for element I hover over.. the problem I have is that for every outer iteration of the repeater indexes of inner iteration repeat and I can't seem to isolate the item I am over.. I am trying to attach something entirely unique to every iteration.. I am sure I am also just missing something obvious :/ — GRowing
– GRowing, Commented Mar 27, 2014 at 6:18

phazei · Accepted Answer · 2018-08-11 01:13:04Z

17

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

edited Aug 11, 2018 at 1:13

phazei

5,4476 gold badges45 silver badges47 bronze badges

answered Mar 27, 2014 at 7:32

Poyraz Yilmaz

5,8671 gold badge28 silver badges28 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

GRowing Over a year ago

Thank you ,, this helps a lot,, I need to look more into things I can do within templates. I appreciate your help.

GRowing Over a year ago

by the way,, your plunker does not calculate total iterations correctly plnkr.co/edit/ZrfB4U84jkpT3Qm4QZCq?p=preview

medhatdawoud Over a year ago

if the elements length inside event not the same the logic gives messy result try the link above in @GRowing comment

score 5 · Accepted Answer · 2016-02-10 14:20:48Z

5

I want to suggest different way to approach this, I think it's pretty cool and easy :

In the template :

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

In the controller :

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

edited Feb 10, 2016 at 14:20

answered Feb 10, 2016 at 13:52

user4547691

Comments

Jon7 · Accepted Answer · 2014-03-27 05:57:09Z

1

If you really want the template to drive this calculation, you could keep a counter in the Controller and create a function that increments that counter. Then call that function from the template.

Honestly, though, it seems very strange to put this sort of logic in the view. It would make much more sense just to do a recursive count in pure Javascript in the Controller.

answered Mar 27, 2014 at 5:57

Jon7

7,2352 gold badges35 silver badges39 bronze badges

1 Comment

GRowing Over a year ago

I am jsut trying to attach something entirely unique to every iteration. I am thinking that I am also just missing something obvious and that this is silly simple..

Collectives™ on Stack Overflow

Angularjs - How to keep count of total iterations across nested ng-repeat in the template

3 Answers 3

3 Comments

Comments

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

3 Comments

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related