比较来自世界各地的卖家的域名和 IT 服务价格

综合风格操纵使用 angular 不起作用B. IE

我想建立一个位置 div 基于控制器中的返回功能 angular

以下效果完美 FireFox 和在 chrome, 但在互联网上 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];
}
}/;


和这里
http://jsfiddle.net/mx4w6uxz/
用于示范

有没有人有关于如何纠正这种情况的建议?
已邀请:

八刀丁二

赞同来自:

你必须使用
https://docs.angularjs.org/api ... Style
反而 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] + "%";


http://jsfiddle.net/ct7y2dv4/

江南孤鹜

赞同来自:

如果你想使用 angular 绑定表达式
{{}}

相似的 , 例如,作为普通风格属性
style="width:{{someScopeVar}}"

,
使用
ng-attr-style


,

他将完美地工作 IE /显然,其他人更聪明/ :/

看看我的
http://jsfiddle.net/0s4twkhv/2/
... 验证的S. Angular JS 1.4.8

在这里我展示了使用
style

,
ng-style


ng-attr-style


在 HTML


<div ng-app="app">
<div ng-controller="controller">
<div style="background:{{bgColor}}">
This will NOT get colored in IE
</div>
<div ng-attr-style="background:{{bgColor}}">
But this WILL get colored in IE
</div>
<div ng-style="styleObject">
And so is this... as this uses a json object and gives that to ng-style
</div>
</div>
</div>





var app = angular.module/'app', []/;

app.controller/'controller', function/$scope/ {

$scope.bgColor = "yellow";
$scope.styleObject = {"background": "yellow"};
}/;

帅驴

赞同来自:

是的,
ng-style

它可以解决这个问题。 您可以使用条件风格
ternary operator

.

HTML

:


<div ng-style="{'display':showInfo?'block':'none'}">
</div>

要回复问题请先登录注册