我在AngularJS中有一个非常简单的报告:
<div class="gridHeader"> <div>User</div> <div>Date</div> <div>Count</div> </div> <div class="gridBody" <div class="gridRow" ng-repeat="row in rps.reports"> <div>{{row.user}}</div> <div>{{row.date}}</div> <div>{{row.count}}</div> </div> </div>
报告工作,但是当日期变化时很难注意到。
有没有办法,我可以分配一个类到网格行,以便一个日期网格行有一个类,下一个日期网格行有另一个类。我认为这是已经可用于奇数和偶数行与Angular,但在这里我需要它工作在每一个日期的变化。
我已经做了一个不同的解决方案(
PLUNKER),其中整个工作都在控制器内部。也许是更多的代码,但如果您有千条记录,您将获得很多性能,因为您将避免对ng类的脏检查。此外,如果您的报告是静态的,并且不会有任何更改,您可以在
disable the two data binding …
CONTROLLER
vm.reports = addReportCssClases(); function addReportCssClases() { var reportsData = [...]; var classes = ['dateOdd','dateEven']; var index = 0; reportsData[0].cssClass = classes[index]; for (var i = 1; i < reportsData.length; i++) { var row = reportsData[i]; index = (row.date !== reportsData[i-1].date) ? (1 - index) : index; row.cssClass = classes[index] ; } return reportsData; }
HTML
<div ng-repeat="row in ::vm.reports track by $index" class="gridRow {{::row.cssClass}}"> <div>{{::row.user}}</div> <div>{{::row.date}}</div> <div>{{::row.count}}</div> </div>