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>

使用者
日期
计数
您可以将
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:
一个@ssougnez答案的修改版本，除了颜色之外还存储当前日期：

if(!(currentDate && currentDate === data.date)){
  currentColor = currentColor == "color1" ? "color2" : "color1";
  currentDate = data.date;
}

普朗克：

这对性能的影响可能比他的版本要小。
我做了一个不同的解决方案（），整个工作都在控制器内部。可能代码要多一点，但是如果您有上千条记录，您将获得很多性能，因为您将避免对
ng类进行脏检查

此外，如果您的报表是静态的，并且没有任何更改，您可以

控制器

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;
}

vm.reports=addreportcscscases（）；
函数addReportCssCases（）{
var reportsData=[…]；
变量类=['dateOdd'，'Date偶数']；
var指数=0；
reportsData[0].cssClass=classes[index]；
对于（变量i=1；i

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>

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


{{：：row.user}
{{：：row.date}
{{：：row.count}

var-app=angular.module（'sample'，[]）；
app.controller（'SampleController'，函数（$scope）
{
$scope.data=[
{
用户：“A”，
日期：“2017年3月2日”
},
{
用户：“B”，
日期：“2017年3月4日”
},
{
用户：“C”，
日期：“2017年4月3日”
},
{
用户：“D”，
日期：“2017年4月3日”
},
{
用户：“E”，
日期：“2017年4月3日”
},
{
用户：“F”，
日期：“2017年4月2日”
}  
];
});
。相同{
背景色：#ddd；
}
.不同{
背景颜色：黄色；
}

使用者
日期
{{row.user}
{{row.date}
{{row.date}
如果所有日期实际上都是具有相同格式的日期，而不是日期时间，则可以使用一行完成此操作

<div class="gridHeader">
   <div>User</div>
   <div>Date</div>
   <div>Count</div>
</div>
<div class="gridBody">
   <div  ng-repeat="row in rps.reports" class="gridRow"  ng-class="{'backblue':$index>0 && row.date!=rps.reports[$index-1].date}">
      <div>{{row.user}}</div>
      <div>{{row.date}}</div>
      <div>{{row.count}}</div>
   </div>
</div>

类backblue必须只具有背景色

.gridRow{
  //other styles
  background-color:red;
}

.backblue{
   background-color:blue !important;
}

重要
仅当“日期”字段仅为“日期”且没有时间时，此选项才起作用。如果在任何情况下，它确实有时间，您将不得不将每个datetime转换为date
我使用
角度过滤器
为此创建了一个非常简单且有效的解决方案，只需在
gridRow
上添加动态类即可

工作

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>

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

角度过滤器

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;
  }
});

可以使用视图中的指令添加带有表达式的类：


（函数（）{
"严格使用",；
角度模块（'app'，[]）；
})();
（功能（）{
"严格使用",；
角度。模块（'app'）。控制器（'MainController'，MainController）；
主控制器。$inject=['$scope']；
功能主控制器（$scope）{
变量日期=新日期（）；
$scope.rps={
报告：[{
用户：“用户A”，
日期：date.setDate（date.getDate（）+1），
计数：5
},
{
用户：“用户B”，
日期：date.setDate（date.getDate（）+2），
计数：10
},
{
用户：“用户C”，
日期：date.setDate（date.getDate（）），
计数：8
},
{
用户：“用户D”，
日期：date.setDate（date.getDate（）+2），
计数：6
},
{
用户：“用户E”，
日期：date.setDate（date.getDate（）），
计数：20
},
{
用户：“用户F”，
日期：date.setDate（date.getDate（）+3），
计数：6
}
]
};
}
})();
.gridHeader，
格里德罗先生{
显示：表格行；
}
.gridHeader>div，
.gridRow>div{
显示：表格单元格；
填充物：5px10px；
}
.类名{
背景：#ff0000；
颜色：#fff；
}

使用者
日期
计数
{{：：row.user}
{{：：row.date | date:'dd-MM-yyyy'}
{{：：row.count}
尝试
ng类
并根据您的要求设定条件。如果
rps，请编辑代码并在
之后添加“>”。报告
是一长串可能影响性能的元素。否则这是一个好方法。@ssougneq-谢谢。我会检查一下，然后再等一会儿，看看其他人是否有不同的答案。@Anne-你试过这个吗？如果您在实现此功能时遇到任何问题，请添加注释。