I need to add tick marks below a ui-slider so that it looks somewhat like this:

Automated interpolation with ng-repeat doesn't work:

In my controller I have a limits array

$scope.limits = [ 1, 3, 5, 10, 15 ];

I reference limits in my html:

<p ng-repeat="l in limits" 
   style="left:{{$index*100/(limits.length-1)}}%"
   class="slider-tick">
    <span class="slider-tick-mark">|</span>
    <br>
    {{l}}
</p>

In Chrome this works fine, but not in IE9 - all the tick marks and numbers are bunched up on the left-hand side

Chrome:

IE9:

It's as if the style expression is not working ("left:{{$index*100/(limits.length-1)}}%")

Manual interpolation works:

If I code the repeated elements by hand, then it works as expected in IE9.

<p class="slider-tick" style="left:0%"  ><span class="slider-tick-mark">|</span><br/>1</p>
<p class="slider-tick" style="left:25%" ><span class="slider-tick-mark">|</span><br/>3</p>
<p class="slider-tick" style="left:50%" ><span class="slider-tick-mark">|</span><br/>5</p>
<p class="slider-tick" style="left:75%" ><span class="slider-tick-mark">|</span><br/>10</p>
<p class="slider-tick" style="left:100%"><span class="slider-tick-mark">|</span><br/>15</p>

Question:

Is there any way to have the ng-repeat expression work in IE9?

Update:

After using the Developer Tools to inspect the DOM, I see there is no style tag on the <p> element at all.

IE9:

In Chrome's developer tools, that style tag does exist:

Chrome:

I need to add tick marks below a ui-slider so that it looks somewhat like this:

Automated interpolation with ng-repeat doesn't work:

In my controller I have a limits array

$scope.limits = [ 1, 3, 5, 10, 15 ];

I reference limits in my html:

<p ng-repeat="l in limits" 
   style="left:{{$index*100/(limits.length-1)}}%"
   class="slider-tick">
    <span class="slider-tick-mark">|</span>
    <br>
    {{l}}
</p>

In Chrome this works fine, but not in IE9 - all the tick marks and numbers are bunched up on the left-hand side

Chrome:

IE9:

It's as if the style expression is not working ("left:{{$index*100/(limits.length-1)}}%")

Manual interpolation works:

If I code the repeated elements by hand, then it works as expected in IE9.

<p class="slider-tick" style="left:0%"  ><span class="slider-tick-mark">|</span><br/>1</p>
<p class="slider-tick" style="left:25%" ><span class="slider-tick-mark">|</span><br/>3</p>
<p class="slider-tick" style="left:50%" ><span class="slider-tick-mark">|</span><br/>5</p>
<p class="slider-tick" style="left:75%" ><span class="slider-tick-mark">|</span><br/>10</p>
<p class="slider-tick" style="left:100%"><span class="slider-tick-mark">|</span><br/>15</p>

Question:

Is there any way to have the ng-repeat expression work in IE9?

Update:

After using the Developer Tools to inspect the DOM, I see there is no style tag on the <p> element at all.

IE9:

In Chrome's developer tools, that style tag does exist:

Chrome:

• javascript
• html
• css
• angularjs
• internet-explorer

• Have you tried taking that expression and sticking it inside of the <p>? Then you can see what it expands to in IE9, maybe it's not expanding correctly. You can probably also see what it expanded to in the dev tools. – Matt Greer Commented Feb 24, 2014 at 4:09
• @MattGreer - what do you mean by inside the <p> please? I had the ng-repeat on the div outside the <p>, that didn't work, so I moved the ng-repeat onto the <p>, as it is shown above. Neither work. – Steve Lorimer Commented Feb 24, 2014 at 4:16
• @MattGreer - I've added some screenshots of the DOM in Chrome vs IE9 - IE9 doesn't even have the style tag! – Steve Lorimer Commented Feb 24, 2014 at 4:36
• there are known issues with legacy versions of IE9 and several of the directives that need post ready pilation that angular processes using $copmile. See my answer below on ways to try to support this. – Brian Vanderbusch Commented Feb 24, 2014 at 5:13

2 Answers 2

Use the ng-style directive instead of the style attribute. The browser is trying to interpret your Angular expression as (invalid) CSS; ng-style will make Angular evaluate the value and then apply it as the style attribute.

<p ng-repeat="l in limits" 
   ng-style="{left: ($index*100/(limits.length-1)) + '%'}"
   class="slider-tick">
    <span class="slider-tick-mark">|</span>
    <br>
    {{l}}
</p>

IE9 struggles with several of the directives requiring the $pile service. There are some steps you can take to try to enable IE9's support through shimming and such. Angular has a section of the developer guide dedicated to IE support of angular:

http://docs.angularjs/guide/ie

The most important piece directly related to IE9, is the ng namespace for the html tag:

<!doctype html>
  <html xmlns:ng="http://angularjs">

I have found, that though the guide says this works, it's not always the case. Sometimes you have to use the data-ng-repeat as opposed to ng-repeat:

<p data-ng-repeat="l in limits" 
   style="left:{{$index*100/(limits.length-1)}}%"
   class="slider-tick">
    <span class="slider-tick-mark">|</span>
    <br>
    {{l}}
</p>

Edit... there was also some issues a while back where using ng-repeat would not transclude and bind elements on the same tag properly (your style declaration). the fix there is to ensure you have the latest version of Angular.