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中添加一个类，例如：

如果task.finished为true，则您的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.finished”，而不是您定义的样式。

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

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

，然后使用ng-style在您的div中调用此函数：

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

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

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

1 个答案: