Search code examples
javascripthtmlcssangularjsng-style

Angular JS: inline style with bound value works on mac not windows

I built a table with ng-repeat showing type specs for a project with a column of "swatches":

enter image description here

As you can see, works great on Mac Safari and Chrome. However, on IE 11/Win 8:

enter image description here

The rows of the table are such:

<tbody>
      <tr ng-repeat="item in type.header">
        <td class="{{item.extraclass}}">{{item.tag}} &ndash; {{item.font}}</td>
        <td>{{item.use}}</td>
        <td>
          {{item.tag}}{{item.class}}
          <span class="swatch" style="background-color:{{item.color}};color: #fff">{{item.color}}</span>,
          {{item.tag}}{{item.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>

It would seem that IE does not like the inline style tag for some reason.

Inspecting the code in safari looks as expected. You can see the style tag with the background-color and color: enter image description here

But inspecting in IE11, it's all messed up. There's only the one color, it's white and rgb: enter image description here

So, why is this working on Mac but not IE? I assume something about my syntax, but I've tried a few things and no results so far.

Solution

  • You need to use ng-style:

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