Angular JS：具有绑定值的内联样式适用于 Mac 而不是 Windows

Posted 2023-03-06

【中文标题】Angular JS：具有绑定值的内联样式适用于 Mac 而不是 Windows

【英文标题】：Angular JS: inline style with bound value works on mac not windows

【发布时间】：2015-11-23 10:12:03

【问题描述】：

我用 ng-repeat 建立了一个表格，显示了一个项目的类型规范，其中有一列“样本”：

如您所见，在 Mac Safari 和 Chrome 上运行良好。但是，在 IE 11/Win 8 上：

表格的行数是这样的：

<tbody>
      <tr ng-repeat="item in type.header">
        <td class="item.extraclass">item.tag &ndash; item.font</td>
        <td>item.use</td>
        <td>
          item.tagitem.class
          <span class="swatch" style="background-color:item.color;color: #fff">item.color</span>,
          item.tagitem.altclass
          <span class="swatch" style="background-color:item.altcolor;color: #fff">item.altcolor</span>,
          item.tag.ko
          <span class="swatch" style="background-color:#fff; color:#2e2e2e">#FFFFFF</span>
        </td>
      </tr>
    </tbody>

IE 似乎出于某种原因不喜欢内联样式标签。

在 safari 中检查代码看起来符合预期。您可以看到带有背景颜色和颜色的样式标签：

但是在 IE11 中检查，一切都搞砸了。只有一种颜色，白色和 rgb：

那么，为什么这适用于 Mac 而不是 IE？我对我的语法做了一些假设，但我已经尝试了一些东西，但到目前为止没有结果。

【问题讨论】：

为什么不使用 ng-style？ docs.angularjs.org/api/ng/directive/ngStyle

【参考方案1】：

你需要使用ng-style:

<span ng-style="'background-color':item.color, 'color': '#fff'">

【讨论】：

太棒了。我知道这与我的语法有关。在 Angular 中有很多不同的方法和格式！谢谢！

【参考方案2】：

使用ng-class 代替class

<td ng-class="item.extraclass">item.tag &ndash; item.font</td>