具有普通 css 属性的链条件 css

【问题标题】：chain conditional css with normal css attribute具有普通 css 属性的链条件 css
【发布时间】：2020-05-27 04:13:05
【问题描述】：

我在 angularJs 中使用 ng-style 来设置元素的样式，如下所示第一部分是条件样式，取决于 isEdit 的值，如果它为 true，则传递空对象，如果未将 color 设置为 gray，则无论第一部分如何，都应应用第二个样式。

我使用的代码似乎不起作用

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

有没有办法链接这两种样式并让它们同时工作？

【问题讨论】：

标签： css angularjs

【解决方案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",
  });
}

Working Demo

【讨论】：