Angular not parse the template {{value}} in style attribute in IE9 and 10

Question

I display a list of bars in a NgRepeat and I use the value frecuency to display the width of bars in percentage. From what i see IE 9-10 doesn't like this part: style="width:{{type.frecuency}}%;"

<div class="drp" ng-repeat="type in weeks">
    <div style="width:{{type.frecuency}}%;" class="percentBar">
        <span ng-if="type.frecuency > 14">{{type.frecuency}}%</span>
    </div>
</div>

Is this an issue with Angular on IE or my code is the problem. Thanks

P.S. I know that i could make a class but modifying the style attribute is faster.

Solution: ng-style="setBarWidth(type.frecuency);"

     scope.setBarWidth = function(width) {
        return {width: width+'%'}; 
     };

Thanks guys! i got it work with: ng-style="setBarWidth(type.frecuency);" — Mihai
– Mihai, Commented Jul 18, 2014 at 12:38

ivarni · Accepted Answer · 2014-07-18 13:04:39Z

1

When using derived values for various HTML attributes, it's always a good idea to use the provided Angular directives to do it. They make sure that the browser sees the values you want it to see and not the binding syntax (in your case {{type.frecuency}})

Here, the ngStyle directive should be used.

<div class="drp" ng-repeat="type in weeks">
    <div ng-style="width:{{type.frecuency}}%;" class="percentBar">
        <span ng-if="type.frecuency > 14">{{type.frecuency}}%</span>
    </div>
</div>

There are similar directives for many other HTML attributes, see the documentation for the full list.

answered Jul 18, 2014 at 13:04

ivarni

17.9k17 gold badges79 silver badges94 bronze badges

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

2 Comments

Mihai Over a year ago

actually ng-style="width:{{type.frecuency}}%;" it won't work in any browser because angular will generate only ng-style="width:73.13%;" without the style attr

Daniël Knippers Over a year ago

According to the docs, you should pass an object to ngStyle, i.e.: ng-style="{ width: type.frequency }". This seems to work well. Of course, you can also define the object in your code elsewhere, e.g. $scope.styles = { width: type.frequency };, and in the view just do ng-style="styles".

Collectives™ on Stack Overflow

Angular not parse the template {{value}} in style attribute in IE9 and 10

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related