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

Question

我想根据 Angular Controller 中函数的返回值设置 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];
    }
});

这是一个 Fiddle 演示

有没有人对如何纠正有建议？

Answer 1

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

<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] + "%";

Demo