AngularJS expression not working within style attribute on IE8

Question

Using an expression like this on the style attribute works on Chrome but doesn't work on IE8

style="width:{{progress}}%"

http://jsfiddle.net/5VDMD/12/ (to test it please type a number in the textbox)

Any workaround for this problem?

Calotte

You may want to try using 'ng-style' instead. – Choriocarcinoma

The solution was ng-style="{width: propertyInScope + '%'}" thanks to David groups.google.com/forum/?fromgroups=#!topic/angular/Bb6087Gv284 – Disinterest

Here is the jsfiddle with the solution working ok on IE8 jsfiddle.net/5VDMD/15 – Disinterest

This doesn't work even in IE11 btw. – Nesto

Answer 1

Try

ng-style="{ width: progress + '%' }"

Wilfordwilfred

I needed single quotes around the css property for Angular 1.5, like so: ng-style="{ 'width' : progress + '%' }" – Sewerage

Answer 2

I had to use ng-attr-style (though I didn't need to use a function).

<div ng-attr-style="width: {{value}}%"></div>

Here is a github discussion about this issue.

Diantha

Answer 3

I made it work that way:

in the controller:

$scope.getStyle = function(progress){
    return {
        width: progress + "%"
    }
}

in the HTML:

<div class="progbar" ng-style="getStyle(progress)"></div>

Nephelometer

Answer 4

For some reason in IE I had to use

ng-attr-style="{{METHOD_TO_RETURN_SOME_STYLE()}}"

Though mine was in a directive under an ng-repeat.

Rudolfrudolfo

Answer 5

if anybody use px instead of %, you have to use this

ng-style="{ width: progress + \'px\' }"

Psychasthenia

I think it would be more helpful for theOP and further users,when you add some explaination for your intension – Miscount