Можно ли совместить нг-класс с нг-стилем - PullRequest
Новая
       24

Можно ли совместить нг-класс с нг-стилем

2 голосов
/ 24 июня 2019

Наша команда работает в 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}">

Возможно ли это вообще?Есть ли другой способ, которым мы можем сделать это?

Спасибо!

1 Ответ

1 голос
/ 24 июня 2019

Вы можете использовать стиль 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 как строку, которую вы определили, например:

Если 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: 

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

и затем вызовите эту функцию в вашем div в стиле ng: 

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

Это должно работать так, как вы хотите.

...