Search code examples
cssangularjsinternet-explorerangularjs-scopeng-style

AngularJS style issue IE


Im trying to figure out how to make this work on IE:

<div ng-if="result.is_mesurable==true" style="left:{{ (result.user_score * 20)-10}}%" class="test-box">

The code basically generates a dynamic table, and the left position of the object is taken from the user_score value.

I know that IE doesn't read this declaration properly, i had a similar bug in the past:

AngularJS weird render issue

"Because {{xxx.xxx}} is invalid css it is trucated by IE and when the angular compiler scans all attributes, the style attribute is empty."

I know there must be a similar solution, but so far i've been unable to figure it out.

Thx in advance.

also, just to note, the result on IE is an empty style attr.


Solution

  • The issue is the same, solvable with ng-style or ng-attr-style:

    ng-style:

    <div ng-style="{left: ((result.user_score * 20) - 10) + '%'}" class="test-box" ng-if="result.is_mesurable==true">
    

    ng-attr-*

    <div ng-attr-style="left:{{ (result.user_score * 20)-10}}%" class="test-box" ng-if="result.is_mesurable==true" >