how to implement a counter with AngularJS inside a ng-repeat? - css

Question

I've got an app, where I get a bunch of data from the API, this data rapresents activities done on a given
day in a given month, and they are displayed in a table.
I can have different tables (let s say one for working activities, one for school and so on).
In the tables, <TH> are the days of the month, and the first TD of each row is the month.
The table only generates a row for any given month only if there is data in that month.
A first ng-repeat will create X number of tables depending on the different activities, and
a second nested ng-repeat will fill the rows of the table for the months with data in it.
Everything works fine, but I have an issue.
There is a specific print view for these tables, before it was one table per page (I used a css rule to break page after every table)
but now I wanna implement something better, as a table could have only one row
(let s say you have activities only in january, and none in other months)
it's pretty ugly when it breaks the page and prints just one table with one row in a new page.
So I wanna implement a counter that let's say after 15 rows it will break the page.
By 15 rows I mean global rows, so it could be a full table with 12 rows (12 months with data) followed
by a table with 3rows only, and then it would break page for the next table.
What's the best way to achieve something like this in angularJS?
with: p.presences.length I get in return the number of months each table in the ng-repeat will have.
So my idea is to have a counter that adds p.presences.length at each iteration of the ng-repeat, then I would use that counter in a ng-class to break the page,
Currently to break pages I'm using this code:
<div class="breakPagePrint" ng-class="p.print ? 'showTablePrint' : 'noDisplay'"> </div>
with this css code:
.breakPagePrint {
page-break-before: always;
}
p.print is a Boolean that is given by a checkbox on every table, so if the user wants a given table to be included in the print page, he ll check the box.
so my idea is to put in this ng-class an expression with the counter, something like
ng-class= "tableCounter > 15 && p.print ? 'showTablePrint' : 'noDisplay'"
but in this case the counter should get reset after 15 otherwise it won't break page again after another 15counts (at 30).
If anyone has some ideas on how to nicely implement a counter and how to use it at best in my case.
Thank you

Answer 1

Use the $index of your ng-repeat to check to see when it has covered a multiple 15 records or use the p.presences.length if that gives the property you need (i.e. the counter for each row). Then insert the div at each multiple.
Assuming your div above currently works (but only for 15 at the moment) then just add the following code to that div. This uses the modulus of 15.
<div ng-class="{'breakPagePrint':(p.presences.length%15==0),'noDisplay':(p.presences.length%15!=0)}"></div>
(I'm para-coding so not 100% sure of the syntax) But give that a try and see if it works. But basically it adds the breaking div whenever the p.presences.length is a multiple of 15, or every 15 records.