AngularJs ng-repeat表达式在IE9中不起作用

Question

I need to add tick marks below a ui-slider so that it looks somewhat like this: 我需要在ui-slider下面添加刻度线，使它看起来像这样：

带刻度线的滑块

Automated interpolation with ng-repeat doesn't work: 使用ng-repeat进行自动插值不起作用：

In my controller I have a limits array 在我的控制器中，我有一个limits数组

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

I reference limits in my html: 我在html中引用limits ：

<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中却没有 - 所有刻度线和数字都在左侧

Chrome: 铬：

ng-repeat适用于Chrome

IE9: IE9：

IE9中的ng-repeat中断

It's as if the style expression is not working ( "left:{{$index*100/(limits.length-1)}}%" ) 就好像style表达式不起作用（ "left:{{$index*100/(limits.length-1)}}%" ）

Manual interpolation works: 手动插补工作：

If I code the repeated elements by hand, then it works as expected in IE9. 如果我手动编码重复的元素，那么它在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? 有没有办法让ng-repeat表达式在IE9中运行？

Update: 更新：

After using the Developer Tools to inspect the DOM, I see there is no style tag on the <p> element at all. 在使用Developer Tools检查DOM之后，我发现<p>元素上根本没有style标记。

IE9: IE9：

IE9 DOM

In Chrome's developer tools, that style tag does exist: 在Chrome的开发者工具中，该样式标记确实存在：

Chrome: 铬：

Chrome DOM

Answer 1

Use the ng-style directive instead of the style attribute. 使用ng-style指令而不是style属性。 The browser is trying to interpret your Angular expression as (invalid) CSS; 浏览器试图将您的Angular表达式解释为（无效）CSS; ng-style will make Angular evaluate the value and then apply it as the style attribute. ng-style将使Angular评估该值，然后将其应用为style属性。

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

Answer 2

IE9 struggles with several of the directives requiring the $compile service. IE9在需要$compile服务的几个指令中挣扎。 There are some steps you can take to try to enable IE9's support through shimming and such. 您可以采取一些步骤来尝试通过填充等启用IE9的支持。 Angular has a section of the developer guide dedicated to IE support of angular: Angular有一段开发人员指南，专门用于支持角度的IE：

http://docs.angularjs.org/guide/ie http://docs.angularjs.org/guide/ie

The most important piece directly related to IE9, is the ng namespace for the html tag: 与IE9直接相关的最重要的部分是html标记的ng命名空间：

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

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 : 有时您必须使用data-ng-repeat而不是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). 编辑...还有一些问题，使用ng-repeat不会正确地转换和绑定同一标签上的元素（你的样式声明）。 the fix there is to ensure you have the latest version of Angular. 修复是为了确保您拥有最新版本的Angular。

AngularJs ng-repeat表达式在IE9中不起作用

问题描述

2 个解决方案

解决方案1
4 已采纳 2014-02-24 05:28:12

解决方案2
3 2014-02-24 05:09:29

AngularJs ng-repeat表达式在IE9中不起作用

问题描述

2 个解决方案

解决方案1 4 已采纳 2014-02-24 05:28:12

解决方案2 3 2014-02-24 05:09:29

解决方案1
4 已采纳 2014-02-24 05:28:12

解决方案2
3 2014-02-24 05:09:29