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

【问题标题】：Changing background color of an element in AngularJS based on info read from Json根据从 Json 读取的信息更改 AngularJS 中元素的背景颜色
【发布时间】：2015-11-03 09:01:22
【问题描述】：

所以基本上我有一个日历。在槽中是从数组中获取的简单时间字符串。在插槽单击上，我获取时间值和连接到元素的类“星期日”，并将它们添加到 Date 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"]}

我真的没有有效的过滤器。我知道这并不多，但我想了解如何做到这一点的总体思路。

【问题讨论】：

这个问题有点混乱，“slot”是什么意思？这几天是一周吗？你想在最终数组中拥有什么？
这只是一个从数组中取出的简单时间字符串。 slot60 = ['09.00','09.30',....]，最后我试图在 timeSlots 下的 Json 中写入的所选值与所选每个插槽的 CSS 之间建立直接链接，以便它在 Html 中被选择为绿色。

标签： css angularjs filter directive

【解决方案1】：

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

但是对于你正在做的事情，就计算能力而言，它会非常昂贵。

我建议你改变你的方法。

执行此类操作的最佳方法是构建一个模仿可用插槽的数据结构。比如：

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

然后，您可以基于天数和具有一系列 ng-repeat 的槽构建视图，并且每个槽元素可以具有标题、状态（空闲或占用）或其他任何内容，以及 ng-classes 以显示不同的样式当天，插槽的状态或您想要的任何信息。

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

【讨论】：