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

这是 Fiddle 来演示

有人有关于如何纠正的建议吗？

Answer 1

您必须使用ng-style而不是样式，否则某些浏览器（例如IE）会删除无效的样式属性值（{{}}等的存在使其无效）甚至角度有机会渲染它。当您使用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

Answer 2

如果你想使用角度绑定表达式{{}}，就像style="width:{{someScopeVar}}"这样的普通样式属性一样，使用 ng-attr-style ，它将完美地运行IE（显然其他更智能的）：）

检查我的jsFiddle ...使用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>

THE JS

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

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

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

Answer 3

是的，NextBtn_2.contentHorizontalAlignment = UIControlContentHorizontalAlignmentCenter; NextBtn_2.contentVerticalAlignment = UIControlContentVerticalAlignmentCenter; NextBtn_2.contentEdgeInsets = UIEdgeInsetsMake(0, 10, 0, 0);可以解决此问题。您可以使用ng-style来使用条件样式。

HTML：

ternary operator

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

3 个答案: