根据从Json读取的信息更改AngularJS中元素的背景色

Question

所以基本上我有一个日历。在插槽中是从数组中获取的简单时间字符串。在一个槽位上，单击我获取时间值和连接到该元素的类“星期天”，并将它们添加到一个日期obj中，以获得该槽位的总体具体时间。然后将其转换为毫秒并存储在Json中。我正在尝试编写一个滤镜，根据该Json将已经选择的插槽着色为绿色。问题是过滤器并不能真正返回CSS。尝试了一个指令，但对更新有点困惑。

<tr data-ng-repeat="x in slot60" data-ng-if="timeSlot==60">
  <td data-ng-class="[sunday]" data-ng-click="passSlot($event)">{{x|myFilter:sunday:this}}</td>
  <td data-ng-class="[monday]" data-ng-click="passSlot($event)">{{x|myFilter:monday:this}}</td>
  <td data-ng-class="[tuesday]" data-ng-click="passSlot($event)">{{x|myFilter:tuesday:this}}</td>
  <td data-ng-class="[wednesday]" data-ng-click="passSlot($event)">{{x|myFilter:wednesday:this}}</td>
  <td data-ng-class="[thursday]" data-ng-click="passSlot($event)">{{x|myFilter:thursday:this}}</td>
  <td data-ng-class="[friday]" data-ng-click="passSlot($event)">{{x|myFilter:friday:this}}</td>
  <td data-ng-class="[saturday]" data-ng-click="passSlot($event)">{{x|myFilter:saturday:this}}</td>
</tr>

{"timeSlot":"30","title":"Test","slots":["1439364600944","1439366400944","1439452800944"]}

我真的没有一个可以工作的过滤器。我知道这不是很多，但我想掌握如何做到这一点的总体思路。

Answer 1

您可以使用一个函数来判断当前插槽是否在数组中，只需使用ng-class属性为选定的插槽着色即可。

但是对于你正在做的事情来说，它在计算能力方面是相当昂贵的。

我建议你改变你的方法。

要做到这一点，最好的方法是构建一个模仿可用插槽的数据结构。类似于：

data: {
    <day1>: [<slot1>, <slot2>, ...],
    <day2>: [<slot1>, <slot2>, ...]
}

然后，您可以使用一系列ng-repeat来构建基于日期和插槽的视图，每个插槽元素可以具有title、status (空闲或已占用)或其他内容，以及ng-classes，以根据日期、插槽的状态或您想要的任何信息显示不同的样式。

然后，您可以编写一个函数，在使用远程调用时使用API将数据从这种格式转换为所需的任何格式。