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

时间:2018-02-08 15:16:16

标签: css angularjs counter

我有一个应用程序,我从API中获取了大量数据,这些数据表示在给定的数据上完成的活动 在给定月份中的一天,它们显示在表格中。

我可以有不同的表格(比如一个用于工作活动,一个用于学校等等)。

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

第一个ng-repeat将根据不同的活动创建X个表,并且 第二个嵌套的ng-repeat将填充表中各行的数据,其中包含数据。

一切正常,但我有一个问题。 这些表有一个特定的打印视图,在每页一个表之前(我使用css规则在每个表之后打破页面)

但是现在我想要更好地实现一些东西,因为一个表只能有一行 (假设您只在1月份开展活动,其他月份没有活动) 当它打破页面并打印一个新页面中有一行的表时,它非常难看。

所以我想实现一个计数器,让我们说在15行之后会破坏页面。

15行是指全局行,因此它可以是一个包含12行(数据为12个月)的完整表 通过一个只有3rows的表,然后它将打破下一个表的页面。

在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)之后它不会再次破坏页面。

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

谢谢

1 个答案:

答案 0 :(得分:0)

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

(我是编码所以不是100%确定语法)但试一试,看看它是否有效。但基本上,每当p.presences.length是15的倍数或每15个记录时,它就会添加破坏div。