цепочка условная css с нормальным атрибутом css

Question

Я использую ng-style в angularJs для стилизации элемента, подобного следующему: первая часть является условным стилем, который зависит от значения isEdit, если он действительно передает пустой объект, если не установлен серый цвет, второй стиль должен применяться независимо от первой части.

код, который я использовал, похоже, не работает

ng-style="isEdit? {}: {'color': 'gray'}, leftStyle"

есть ли способ связать 2 стиля и заставить их работать сразу?

Answer 1

Мы можем добиться этого, объединив стили в методе и затем вызвав его в шаблоне

<h1 ng-style="isEdit ? {} : getStyles()">
    {{ heading }}
</h1>

var style1 = {
  color: "white",
  "background-color": "coral",
  "font-size": "60px",
  padding: "50px",
};

function _getStyles() {
  return Object.assign({}, style1, {
    border: "3px solid black",
  });
}

Рабочая демонстрация