AngularJS expression not working within style attr

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?

Answer 1

Try

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

Answer 2

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

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

Answer 3

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.

Answer 4

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>

Answer 5

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.