angularjs – 如何将类分配给报告,而不是奇数甚至行,但是更改日期列?

前端之家收集整理的这篇文章主要介绍了angularjs – 如何将类分配给报告,而不是奇数甚至行,但是更改日期列?前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
我在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>

猜你在找的Angularjs相关文章