如何在 ng-repeat 中使用 AngularJS 实现计数器？

Question

我有一个应用程序，我从 API 中获取大量数据，这些数据表示在给定条件下完成的活动 给定月份中的某天，并显示在表格中。

我可以有不同的桌子（假设一张用于工作活动，一张用于学校等等）。

在表格中，<TH> 是月份中的日期，每行的第一个 TD 是月份。 只有当该月有数据时，该表才会为任何给定月份生成一行。

第一个 ng-repeat 将根据不同的活动创建 X 个表，并且 第二个嵌套的 ng-repeat 将在表的行中填充月份的数据。

一切正常，但我有一个问题。 这些表有一个特定的打印视图，之前它是每页一个表（我使用 css 规则在每个表之后分页）

但现在我想实现更好的东西，因为一张表只能有一行 （假设你只有一月份有活动，其他月份没有活动） 当它打破页面并在新页面中仅打印一个带有一行的表格时，它非常难看。

所以我想实现一个计数器，假设在 15 行之后它会打破页面。

15 行是指全局行，因此它可能是一个包含 12 行（12 个月的数据）的完整表 通过一个只有 3 行的表，然后它将为下一个表分页。

在 angularJS 中实现此类目标的最佳方法是什么？

with: p.presences.length 我得到 ng-repeat 中每个表的月数作为回报。

所以我的想法是有一个计数器，在 ng-repeat 的每次迭代中添加 p.presences.length，然后我会在 ng-class 中使用该计数器来打破页面，

目前我正在使用此代码来中断页面：

<div class="breakPagePrint" ng-class="p.print ? 'showTablePrint' : 'noDisplay'"> </div>

使用这个 css 代码：

.breakPagePrint {
    page-break-before: always;
}

p.print 是一个布尔值，由每个表格上的复选框给出，因此如果用户希望将给定表格包含在打印页面中，他将选中该框。

所以我的想法是在这个 ng-class 中加入一个带有计数器的表达式，类似于

ng-class= "tableCounter > 15 && p.print ? 'showTablePrint' : 'noDisplay'"

但是在这种情况下，计数器应该在 15 之后重置，否则它不会在再过 15 个计数（在 30 处）后再次中断页面。

如果有人对如何很好地实现计数器以及如何在我的情况下最好地使用它有一些想法。

谢谢

Answer 1

使用 ng-repeat 的 $index 来检查它何时覆盖了多条 15 条记录，或者使用 p.presences.length 如果这提供了您需要的属性（即每行的计数器）。然后在每个倍数处插入 div。

假设您上面的div 当前有效（但目前仅适用于 15 个）然后只需将以下代码添加到该div。这使用了 15 的模数。

<div ng-class="{'breakPagePrint':(p.presences.length%15==0),'noDisplay':(p.presences.length%15!=0)}"></div>

（我是para-coding，所以不能100%确定语法）但是试试看它是否有效。但基本上只要p.presences.length 是 15 的倍数或每 15 条记录，它就会添加中断 div。