用ng-repeat赋予元素不同的颜色

Question

HTML逻辑与Javascript逻辑

我想做一些非常简单的事情。根据优先级描述，我想给TD添加不同的颜色。

此HTML是根据票证动态生成的。现在让我们说我有10种描述类型，html会开始变得混乱。有更好的方法还是可以做到这一点？

 <tr ng-repeat="ticket in tickets">

   <td class="color-SOMETHING">{{ticket.TICKET_PRIORITY_DESCRIPTION}}</td>

  <tr>

Answer 1

尝试将优先级用作类：

<tr ng-repeat="ticket in tickets">
    <td class="color-{{ticket.TICKET_PRIORITY_DESCRIPTION}}">{{ticket.TICKET_PRIORITY_DESCRIPTION}}</td>
</tr>

然后，在您的CSS中添加以下内容：

.color-high {
   background-color: red;
}

.color-low {
   background-color: green;
}

.color-normal {
   background-color: yellow;
}

等等，对于您拥有的每个优先级。

Answer 2

像这样基于票证属性应用条件类

<tr ng-repeat="ticket in tickets">

   <td class="color-SOMETHING" ng-class="{'redColor': ticket.TICKET_PRIORITY_DESCRIPTION=='high', 'yelloColor': ticket.TICKET_PRIORITY_DESCRIPTION=='medium', 'blueColor': ticket.TICKET_PRIORITY_DESCRIPTION=='low'}">{{ticket.TICKET_PRIORITY_DESCRIPTION}}</td>

  <tr>

CSS

.redColor {
  background-color: red;
}
.yelloColor {
  background-color: yellow;
}
.blueColor {
  background-color: blue;
}