是否可以将 ng-class 与 ng-style 结合使用

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-style 而不是 ng-class。

在这种情况下：

<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-class 将在您的 div 中添加一个 class，就像您定义的字符串一样，例如：

如果 task.finished 为真，那么您的 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}">

请注意，添加的 class 是 "c.finished" 而不是您定义的样式。

一个想法是在您的控制器中创建一个函数来设置 ng-style:

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

然后在您的 div 中使用 ng-style:

调用此函数

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

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

是否可以将 ng-class 与 ng-style 结合使用

Is it possible to combine ng-class with ng-style

angularjs

servicenow

ng-class

ng-style