Angular JS, output value in html attribute, fails in IE8/9

Question

I got a situation where I loop trough an array of colors and output a hex-value (through angular) into the style attribute

<p class="colors">
    <span ng-repeat="color in product.colors" class="product-color" title="{{ color.title }}" style="background-color: #{{ color.hex }};"></span>
</p>

For some reason, IE8 and IE9 doesn't recognize the background color. All I get is a element without the style attribute, but all the other attributes are there. I have triple checked the values for the variables and they are all there, and it works in Chrome/FF/Opera/Safari.

Output in IE8/9

<span title="White" class="product-color ng-scope" ng-repeat="color in product.colors">

Output in Chrome

<span ng-repeat="color in product.colors" class="product-color ng-scope" style="background-color: #FFFFFF;" title="Vit"></span>

What shall I do to make IE recognize the style attribute?

Have you tried ng-style?

Stewie
– Stewie

2013-10-30 08:38:10 +00:00
Commented Oct 30, 2013 at 8:38 — Stewie
– Stewie, Commented Oct 30, 2013 at 8:38

J. Bruni · Accepted Answer · 2013-10-30 08:43:00Z

3

Use ng-style instead of style - IE is removing the attribute before Angular is parsing/compiling the HTML.

http://docs.angularjs.org/api/ng.directive:ngStyle

answered Oct 30, 2013 at 8:43

J. Bruni

20.5k13 gold badges80 silver badges93 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Angular JS, output value in html attribute, fails in IE8/9

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related