AngularJS expression not working within style attr

问题:

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?

回答1:

Try

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

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

回答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>

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

回答5:

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

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