javascript - ionic Angular : dynamic styling on cards

Question

上下文:

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

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

我尝试过的:

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

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

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

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

Answer 1

我建议查看 ng-class听起来好像它会满足您的要求。

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

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

编辑:userOnBreak是说明您的用户是否在休息的变量( bool 值)。