Question

在Angular控制器上我有一系列事件：

vm.events = [
  { date: "18-02-2016", name: "event A" },
  { date: "18-02-2016", name: "event C" },
  { date: "24-02-2016", name: "event D" }
];

我有一个当月的所有日子：

var days = [
  { date: "01-02-2016" },
  { date: "02-02-2016" },
  { date: "03-02-2016" }
  ...
];

在我的角度视图中，我有以下内容：

<span
  class="day"
  ng-class="{ 'today': isToday(day) }"
  ng-repeat="day in vm.days">{{getDay(day)}}</span>

当一天有事件时，如何在日期中至少有一个记录在vm.events中时，如何在跨度中添加一个类？

Answer 1

以下是您的解决方案：

<div ng-repeat="day in days">
  <span ng-class="{true:'today', false: 'day' } [isToday(day.date)]">
     {{day.date}} : {{isToday(day.date)}}
  </span>
</div>

检查工作plunker

Answer 2

您可以使用 ngClass ，方法是添加条件，如：

ng-class="{true:'today'}[isToday(day)]"

Answer 3

第一个想法可能是编写一个采用日期的函数，然后通过迭代事件数组来确定日期是否有任何事件。

这将导致每个摘要周期进行大量不必要的迭代。相反，您可以在数据在ng-repeat中呈现之前对其进行操作。修改数据，使每天都有一系列事件。现在，您只需检查当天的事件数组是否包含任何事件。

理想情况下，我会尝试在服务器上更改此设置，以便数据以这种方式降低。但客户无法做到这一点。这是一个简单的实现：

angular.forEach(vm.days, function(day) {
  // this modifies the day objects in vm.days, if you didn't want to
  // do that you could copy them and produce a separate array of days
  // with events...
  day.events = vm.findEventsFor(day))
});

vm.findEventsFor(day) {
  var events = [];
  angular.forEach(vm.events, function(event) {
    if (event.date === day.date) {
      events.push(event);
    }
  }
  return events;
}

您的ng-class可能如下所示：

ng-class="{today: isToday(day), hasEvents: day.events.length > 0}"

当数组中包含项目时，在ng-repeat上添加角度类

3 个答案: