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?

The solution was ng-style="{width: propertyInScope + '%'}" thanks to David https://groups.google.com/forum/?fromgroups=#!topic/angular/Bb6087Gv284 — Christian Quirós, Dec 05 '12 at 07:30
Here is the jsfiddle with the solution working ok on IE8 http://jsfiddle.net/5VDMD/15/ — Christian Quirós, Dec 05 '12 at 07:31

score 57 · Accepted Answer · answered Jun 18 '13 at 13:34

57

Try

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

answered Jun 18 '13 at 13:34

Aleksandr Sabov

Thank you! This is the best answer. – Tom May 09 '16 at 07:57
3

I needed single quotes around the css property for Angular 1.5, like so: `ng-style="{ 'width' : progress + '%' }"` – NathanQ Jul 19 '16 at 22:18

score 26 · Answer 2 · answered Sep 19 '14 at 17:49

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.

answered Sep 19 '14 at 17:49

Jason

score 13 · Answer 3 · answered Feb 25 '13 at 09:43

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>

answered Feb 25 '13 at 09:43

user2106730

score 4 · Answer 4 · answered Dec 10 '13 at 13:35

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.

answered Dec 10 '13 at 13:35

Brandon.Staley

Alamgir · Answer 5 · 2014-08-10T06:54:43.720

0

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

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

edited Aug 10 '14 at 06:54

answered Aug 07 '14 at 11:09

Alamgir

I think it would be more helpful for theOP and further users,when you add some explaination for your intension – Reporter Aug 07 '14 at 11:52

5 Answers5