Ionic Angularjs：卡片上的动态造型

Question

上下文：

我的卡片将叠加在网格系统上以表示时移。网格的顶部将属于某些时间范围（下午1点，下午2点，下午3点等），并且该方将属于分配给班次的人员。卡正常状态只有绿色顶部边框。然而，当这个人休息时，我希望它是蓝色的，而当这个人已经过了预定时，我希望它是红色的。

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

我尝试了什么：

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

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

一般的问题是，最好的方法是什么？

修改： 最终产品看起来像这样。

Answer 1

我建议调查ng-class，因为它听起来好像符合您的要求。

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

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

编辑：userOnBreak是变量，说明用户是否休息（布尔值）。