HTML 逻辑与 Javascript 逻辑
我想做一些非常简单的事情。根据优先级描述,我想给td赋予不同的颜色。
此 HTML 是根据工单动态生成的。现在假设我有 10 种类型的描述,html 将开始变得混乱。有没有更好的方法或可以这样做?
<tr ng-repeat="ticket in tickets">
<td class="color-SOMETHING">{{ticket.TICKET_PRIORITY_DESCRIPTION}}</td>
<tr>
尝试使用优先级作为类:
<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;
}
等等,每个优先级都有一个。
基于 ticket 属性应用条件类,如下所示
<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;
}