Question

我需要在ui-slider下方添加刻度线，以便它看起来像这样：

slider with ticks

使用ng-repeat进行自动插值不起作用

在我的控制器中，我有一个limits数组

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

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

在Chrome中，这种方法很好，但不在IE9中 - 所有刻度线和数字都在左侧聚集

铬：

ng-repeat works in Chrome

IE9：

ng-repeat breaks in IE9

好像style表达式不起作用（"left:{{$index*100/(limits.length-1)}}%"）

手动插值有效：

如果我手动编码重复的元素，那么它在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>

问题：

有没有办法让ng-repeat表达式在IE9中运行？

更新

使用开发人员工具检查DOM后，我发现style元素上根本没有<p>标记。

IE9：

IE9 DOM

在Chrome的开发者工具中，该样式标记确实存在：

铬：

Chrome DOM

Answer 1

使用ng-style directive代替style属性。浏览器试图将您的Angular表达式解释为（无效）CSS; 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在需要$compile服务的几个指令中挣扎。您可以采取一些步骤来尝试通过填充等启用IE9的支持。 Angular有一部分开发人员指南，专门用于IE支持angular：

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

与IE9直接相关的最重要部分是ng标记的html命名空间：

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

我发现，尽管指南说这有效，但情况并非总是如此。有时您必须使用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>

编辑...还有一些问题，使用ng-repeat不能正确地转换和绑定同一标签上的元素（你的样式声明）。解决方法是确保您拥有最新版本的Angular。

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

2 个答案: