Angularjs 是否可以将ng类与ng样式相结合

我们的团队现在正在服务中工作，对于将

ng类

与

ng风格

结合使用有一个普遍的问题。我们已经创建了一个小部件，它是任务块，希望根据它们的状态（即绿色表示已完成，红色表示过期，黄色表示待处理，灰色表示可选）给边框上色

最初，我们仅使用

ng类

：

。完成边框{
边界：坚实的2px$success；
指针事件：无；
不透明度：0.55；
}
.逾期的边界{
边界：固体2px$逾期；
}
.未决边界{
边界：今天到期的2倍稳定美元；
}
.可选边框{
边框：实心2px$彩色灯；
}

但是，为了使颜色更加灵活，ServiceNow允许使用选项模式，用户可以在其中选择要为其已完成、过期、挂起和可选任务指定的颜色。由于选项模式不能在CSS中使用，我们想知道是否有一种方法可以将

ng样式

与

ng类

结合使用。我们尝试了以下方法，但无效：

在我们的客户端脚本中，我们尝试了以下内容：

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 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}">

这可能吗？我们还有别的方法可以做到这一点吗

---

谢谢

您可以使用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}">

然后在您的div中使用ng样式调用此函数：

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

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

这应该是你想要的