Problems styling HTML in Angular templates with IE

Question

I am having trouble styling my elements while doing an ng-repeat of my data array in Internet Explorer. Everything works fine in Safari, Chrome, Firefox, but for some reason IE is not liking the way I am doing things.

I am using a custom filter for the ng-repeat that you'll see below

.filter('range', function() {return function(input, total) {total = parseInt(total);for (var i=0; i<total; i++)input.push(i);return input; };})

Basically, anything inside ng-style do not get translated in IE.

<div ng-repeat="key in [] | range:documentData.info.pages">
    <div ng-if="(key+1) <= documentData.info.pages" ng-style="width:{{ documentData.style.width }}px;height:{{ documentData.style.height }}">
        <div class="formBackground" ng-style="background-image:url('/images/templates/{{ documentData.info.uid }}/{{ documentData.info.id }}/{{ (key+1) }}.png')">  
            Stuff
        </div>
    </div>
</div>  

Answer 1

Your issue might be due to the string syntax that you are using to set width and height. Instead try using object literal syntax, i.e {width:widthProp, height:heightProp}.

i.e

ng-style="{width:documentData.style.width, height: documentData.style.height }"

and

ng-style="{'background-image':'url(/images/templates/{{documentData.info.uid}}/{{documentData.info.id}}/{{(key+1)}}.png)'}"