AngularJS style issue IE

Question

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.

Answer 1

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" >