angularjs - 如何将一个类分配给一个报告，而不是奇数行，偶数行，而是日期列的变化？

Question

我在 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 的奇数和偶数行，但在这里我需要它来处理每个日期更改。

Answer 1

我做了一个不同的解决方案( PLUNKER )，其中整个工作都在 Controller 内部。也许代码多一点，但如果你有一千条记录，你会获得很多性能，因为 您将避免对 ng-class 进行脏检查 .此外，如果您的报告是静态的并且不会有任何更改，您可以 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>