AngularJS Count within nested ng-repeat

Question

I am looking for a way to count the amount of 'td' elements created in a loop.

I can't use $index for this as on each row the index gets reset, what is the cleanest and simplest way to to set i on each iteration. So the first column value is 1 & the first column count 0.

My Code so far:

        <table class="calendar">
            <thead>
                <tr>
                    <th>M</th>
                    <th>T</th>
                    <th>W</th>
                    <th>T</th>
                    <th>F</th>
                    <th>S</th>
                    <th>S</th>
                </tr>
            </thead>
            <tbody ng-click="bindCellValue($event)">
                <tr ng-repeat="week in (days.length/7 | array)">
                    <td ng-repeat="day in days.slice(7*$index, 7*$index + 7) track by $index">
                        {{ day }}
                        <i class="icon ion-checkmark answer-correct" ng-if="submitted && answers[i].correct"></i>
                        <i class="icon ion-close answer-wrong" ng-if="submitted && !answers[i].correct"></i>
                    </td>
                </tr>

            </tbody>
        </table>

and in my controller:

$scope.days = [ 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20, 21, 22, 23, 24, 25, 26, 27, 28, 29, 30, 31, null, null, null, null ];

You mean days.length? Anyway, you know the number beforehand. It's based on the model, so why count something? — a better oliver
– a better oliver, Commented Sep 3, 2015 at 13:09
because I need to use the count of the items to match up with the key in an answers array: ng-if="submitted && answers[i].correct"> — ChrisBratherton
– ChrisBratherton, Commented Sep 3, 2015 at 13:12
I'm not quite sure I get the question. Do you want the current count for each cell? Can you maybe draw or make a quick static table of how you want it to function? — Phillip
– Phillip, Commented Sep 3, 2015 at 13:15
Each ng-repeat creates a child scope with the passed data, and also adds an additional $index variable in that scope.So what you need to do is reach up to the parent scope, and use that $index. See this — road2victory
– road2victory, Commented Sep 3, 2015 at 13:33

a better oliver · Accepted Answer · 2015-09-03 13:29:05Z

2

You can use ng-init.

<tr ng-repeat="week in (days.length/7 | array)" ng-init="w = $index">
    <td ng-repeat="day in days.slice(7*$index, 7*$index + 7) track by $index" ng-init="i = w*7 + $index">
        {{ day }}
        <i class="icon ion-checkmark answer-correct" ng-if="submitted && answers[i].correct"></i>
        <i class="icon ion-close answer-wrong" ng-if="submitted && !answers[i].correct"></i>
    </td>
 </tr>

answered Sep 3, 2015 at 13:29

a better oliver

26.9k2 gold badges64 silver badges67 bronze badges

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

Comments

Mathew Berg · Accepted Answer · 2015-09-03 13:34:00Z

0

Should be something like this:

<i class="icon ion-checkmark answer-correct" ng-if="submitted && answers[$parent.$parent.$index * 7 + $parent.$index].correct"></i>

Basically, take the $parents index (the one where you create the week) multiply it by 7 and then add the other $index in. I suggest outputting that until you're sure it's right.

edited Sep 3, 2015 at 13:34

answered Sep 3, 2015 at 13:28

Mathew Berg

28.8k11 gold badges72 silver badges94 bronze badges

2 Comments

a better oliver Over a year ago

ng-if creates a new scope. So where, do you think, does $parent point to?

Mathew Berg Over a year ago

Ah yes, just glossed over that, so double $parent

Collectives™ on Stack Overflow

AngularJS Count within nested ng-repeat

2 Answers 2

Comments

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related