如何在NG重复中使用AngularJS实现计数器



我有一个应用程序,在这里我从API中获取了一堆数据,这些数据Rapresents Active在给定的给定月份的一天,它们显示在桌子中。

我可以有不同的表格(让S说一个用于工作活动,一个用于学校等(。

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

第一个ng重复将根据不同的活动创建x数量的表,并且第二个嵌套的ng重复将在数月的数据中填充表的数据行。

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

(

,但是现在我想更好地实施一些东西,因为一个表只有一行(假设您仅在一月份进行活动,而在其他几个月中则没有(当它打破页面并在新页面中打印一行时,这很丑陋。

所以我想实施一个计数器,以便说15行后它将打破页面。

乘15行,我的意思是全球行,所以它可能是一个完整的表,遵循12行(12个月(仅通过一个只有3 rows的表,然后它将打破下一个表的页面。

在Angularjs中实现这样的事情的最佳方法是什么?

with: p.presences.length我获得了ng重复中的每个表的月数。

所以我的想法是要有一个在NG重复的每次迭代中添加p.presences.length的计数器,然后我会在NG级中使用该计数器来破坏页面,

目前正在打破页面,我正在使用此代码:

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

使用此CSS代码:

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

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

所以我的想法是在柜台上放入这个ng级表达式,类似于

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

但是,在这种情况下,计数器应在15后重置,否则将在另外15个计数之后再次打破页面(30(。

如果有人对如何很好地实现计数器以及如何充其量使用它的想法。

谢谢

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

最新更新