是否可以将NG级与NG风格相结合

Question

我们的团队正在ServiceNow工作，并有一个有关将ng-class与ng-style结合使用的一般问题。我们创建了一个小部件，该小部件是任务图块，并希望根据其状态为边界上色(即成品绿色，逾期红色，黄色用于待处理的黄色，可选的灰色(。

最初，我们仅使用 ng-class：

完成了此操作。

<div class="card" ng-click="task.finished ||c.onWidget(task)"
     ng-class="{'finished-border': task.finished,
                'overdue-border': !task.finished && task.isOverDue,
                'pending-border': !task.finished && !task.isOverDue,
                'optional-border': !task.finished && task.isOptional}">

.finished-border {
  border: solid 2px $success;
  pointer-events: none;
  opacity: 0.55;
}
.overdue-border {
  border: solid 2px $overdue;
}
.pending-border {
  border: solid 2px $due-today;
}
.optional-border {
  border: solid 2px $color-light;
}

但是，为了使颜色更加灵活，ServiceNow允许使用选项模式，用户可以在其中选择他们想要完成的颜色，逾期，待处理和可选任务。由于无法在CSS中使用选项模式，因此我们想知道是否有一种将ng-style与ng-class的使用相结合的方法。我们已经尝试了以下操作，但它没有起作用：

在我们的客户端脚本中，我们尝试了这样的事情：

c.finished = {
  "border" : "solid 2px " + c.options.finished_color,
  "pointer-events" : "none",
  "opacity" : "0.55"
}
c.overdue = {
  "border" : "solid 2px " + c.options.overdue_color
}
c.pending = {
  "border" : "solid 2px " + c.options.pending_color
}
c.optional = {
  "border" : "solid 2px " + c.options.optional_color
}

<div class="card" ng-click="task.finished ||c.onWidget(task)"
     ng-class="{'c.finished': task.finished,
                'c.overdue': !task.finished && task.isOverDue,
                'c.pending': !task.finished && !task.isOverDue,
                'c.optional': !task.finished && task.isOptional}"> 

这甚至可能吗？有其他方法可以实现这一目标吗？

谢谢！

Answer 1

您可以使用NG风格而不是NG类。

在这种情况下：

<div class="card" ng-click="task.finished ||c.onWidget(task)" 
     ng-class="{'c.finished': task.finished, 
                'c.overdue': !task.finished && task.isOverDue, 
                'c.pending': !task.finished && !task.isOverDue, 
                'c.optional': !task.finished && task.isOptional}">

NG级会在您的Div中添加类，例如您定义的字符串，例如：

如果任务是正确的，那么您的DIV将看起来像这样：

<div class="card c.finished" ng-click="task.finished ||c.onWidget(task)" 
     ng-class="{'c.finished': task.finished, 
                'c.overdue': !task.finished && task.isOverDue, 
                'c.pending': !task.finished && !task.isOverDue, 
                'c.optional': !task.finished && task.isOptional}">

请注意，添加的类是" C. fined"的，而不是您定义的样式。

一个想法是在控制器中创建一个函数以设置NG风格：

function myDivStyle(task){
  if (task.finished) {
    return c.finished;
  } else if (!task.finished && task.isOverDue) {
    return c.overdue;
  } (...)
}

，然后使用NG风格的DIV调用此功能：

<div class="card" ng-click="task.finished ||c.onWidget(task)" 
     ng-style="myDivStyle(task)">

这应该像您想要的一样工作。