Ionic Angularjs：卡片上的动态样式

Question

上下文：

我有一些卡片将覆盖在网格系统上以表示时间偏移。网格的顶部将属于特定的时间范围（下午 1 点、下午 2 点、下午 3 点等），而侧面将属于分配到轮班的人员。卡片的正常状态只是带有绿色的顶部边框。然而，当这个人在休息时，我希望它是蓝色的，当这个人已经超过计划时，我希望它是红色的。

我必须检查不同的休息时间和标准以动态放置卡片的蓝色和红色部分。

我的尝试：

我尝试过为每种情况创建单独的卡片并将它们拼接在一起，但它的工作并不干净。它是使用 flex css 完成的。

我希望能够仅将卡片的一部分动态更改为所需的颜色，而不是将它们拼接在一起只是因为它对我来说似乎更直观但我似乎无法在谷歌上搜索正确的东西如果它甚至存在。

一般问题是解决此问题的最佳方法是什么？

编辑： 最终产品看起来像这样。

Answer 1

我建议您研究一下ng-class，因为它听起来好像符合您的要求。

它可以让你做类似的事情；

<div ng-class="{'break': userOnBreak}">// code</div>

编辑：userOnBreak 是说明您的用户是否处于休息状态的变量（布尔值）。