使用Angular操作内联样式在IE中不起作用

Question

我想根据角度控制器中函数的返回值设置div的位置

以下内容在FireFox和chrome中可以正常运行，但在Internet
Explorer中会{{position($index)}}%被解释为文字字符串值，因此无效

<div ng-repeat="item in items" style="left:{{position($index)}}%"></div>

这是问题的示例：

var app = angular.module('app', []);

app.controller('controller', function($scope) {

    $scope.items=[1,2,3,4,5,6,7,8,9,10];

    $scope.position=function(i){
        var percent =[5,10,15,20,25,30,35,40,45,50,55,60,65,70];
        return percent[i+1];
    }
});

这是一个 小提琴 来演示

有没有人建议如何纠正？

Answer 1

您必须使用ng-
style
而不是style，否则某些浏览器IE会{{}}在甚至angular都没有机会渲染它之前删除无效的style属性值（等的存在会使它无效）。使用ng- styleangular时，将计算表达式并向其添加内联样式属性。

<div ng-repeat="item in items" ng-style="{left: position($index) + '%'}"></div>

由于无论如何您都在计算位置，因此您也可以%从中添加position并发送。还要记住，在ng-
repeat中调用一个函数将在每个摘要周期调用该函数，因此您可能要注意不要在方法内部进行过多的密集操作。

 <div ng-repeat="item in items" ng-style="{left: position($index)}">{{item}}</div>

然后返回

  return percent[i+1] + "%";

演示版