37

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?

4

5 Answers 5

57

Try

ng-style="{ width: progress + '%' }"
2
  • Thank you! This is the best answer.
    – Tom
    May 9, 2016 at 7:57
  • 3
    I needed single quotes around the css property for Angular 1.5, like so: ng-style="{ 'width' : progress + '%' }"
    – NathanQ
    Jul 19, 2016 at 22:18
26

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.

13

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

0

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

ng-style="{ width: progress + \'px\' }"
1
  • I think it would be more helpful for theOP and further users,when you add some explaination for your intension
    – Reporter
    Aug 7, 2014 at 11:52

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.