如何将类分配给报表,而不是奇数,偶数行,而是更改日期列？

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),其中整个工作在控制器内部.也许是更多的代码,但如果你有千条记录,你将获得很多性能,因为你将避免脏检查ng-class.
此外,如果您的报告是静态的并且不会有任何更改,您可以禁用两个数据绑定 ...

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>

Answer 2

您可以使用ng-class控制器中定义的功能.例如:

var currentColor = "color1";

$scope.getClass = function(index)
{
  if (index !== 0 && $scope.data[index].date !== $scope.data[index - 1].date)
  {
    currentColor = currentColor == "color1" ? "color2" : "color1";
  }

  return currentColor;
}

在您的模板中:

<div class="gridRow" ng-repeat="(i, d) in data" data-ng-class="getClass(i)">

请参阅plunker:http://plnkr.co/edit/PPPJRJJ1jHuJOgwf9lNK

Answer 3

我为此创建了一个非常简单且有效的解决方案angular-filter，只需在gridRow.

工作中的jsfiddle

超文本标记语言

<div ng-repeat="row in rps.reports" 
    class="gridRow {{row.date | filterDate}}">

风格

.even {
  background-color: green;
  color: #fff;
}
.odd {
  background-color: red;
  color: #000;
}

角度滤波器

myApp.filter('filterDate', function() {
  var lastDate,
    count = 0,
    calssName = 'even';
  return function(date) {
    var newDate = new Date(date).toDateString();
    !lastDate && (lastDate = newDate);
    if (newDate != lastDate) {
      if (calssName == 'even') {
        calssName = 'odd';
      } else {
        calssName = 'even';
      }
    }
    lastDate = newDate;
    return calssName;
  }
});