Bob Horn Bob Horn - 2 months ago 10
HTML Question

ng-if and $index off by 1

I'm trying to display a schedule and I want to create a break after each group of matches within a week. For example, I want an

after the first five matches in week 1. Then again after five matches of week 2. What I have now includes the first six matches, and then every five after that. Why? What do I need to do to break after every five?

Note: As an additional enhancement, it would be nice to break when the week changes, and not just assume there will be five matches each week. If someone has a way to solve that as well, that would be great.

As you can see below, the first six matches show, which incorrectly includes the first match of week two.

enter image description here

This is in my HTML:

<div ng-repeat="match in state.eastSchedule.Matches">
<div class="row">
<div class="col-xs-1 text-center">{{match.WeekNumber}}</div>
<div class="col-xs-2">{{match.AwayPlayer}}</div>
<div class="col-xs-2">{{match.HomePlayer}}</div>
<div class="col-xs-2">{{match.Score}}</div>
<hr ng-if="$index > 0 && $index % 5 == 0" style="border-color:black;" />

I also tried removing the part about only using an index > 0, but then I get a break after the very first match, and then every five after that.

<hr ng-if="$index > 0 && $index % 5 == 0" style="border-color:black;" />


The HTML is structured so that the <div class="row"> appears before the <hr> tag.

So on the 6th iteration of the loop (second week, when $index is 5), it prints the <div class="row"> for the first item in the second week then the <hr>.

To fix you can move the <hr> tag so that it is above <div class="row">.