操纵内嵌样式具有角不能在IE浏览器 [英] Manipulating inline style with angular does not work in IE

问题描述

我想成立一​​个div的基础上，角控制器

I wanted to set the position of a div based on the return value of a function in an angular controller

在FireFox和Chrome，但在Internet Explorer以下罚款作品 {{位置（$指数）}}％是间preTED作为一个字符串值因此没有影响

The following works fine in FireFox and in chrome but in Internet explorer {{position($index)}}% is interpreted as a literal string value and therefore has no effect

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

下面是问题的一个例子：

Here is an example of the issue:

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];
    }
});

这是一个 小提琴 展示

And here is a Fiddle to demonstrate

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

Does anyone have suggestions on how to rectify?

推荐答案

您必须使用 NG-风格而不是风格，否则像 IE 有些浏览器会删除无效的样式属性的值（presence> {{}} 等使其无效）前角，甚至有机会呈现。当您使用 NG-风格角度将计算除权pression并添加内嵌样式属性吧。

You must use ng-style instead of style, otherwise some browsers like IE will remove invalid style attribute values (presence of {{}} etc makes it invalid) before even angular has a chance to render it. When you use ng-style angular will calculate the expression and add the inline style attributes to it.

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

既然你反正计算，你可以同时从位置添加％并把它的位置。还记得调用NG重复功能将调用该函数每消化周期，所以你可能要小心，不要做方法内过多的集约化经营。

Since you are anyways calculating the position you could as well add % from the position and send it. Also remember that calling a function in ng-repeat will invoke the function every digest cycle, so you may want to be careful not to do too much intensive operations inside the method.

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

和返回

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

演示

这篇关于操纵内嵌样式具有角不能在IE浏览器的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！