Inline Manipulieren Stil mit Winkeln in IE nicht

Question

funktioniert wollte ich die Position eines div auf dem Rückgabewert einer Funktion in einem Winkelregler

folgende Arbeiten in FireFox und in Chrom fein Basis setzen, sondern in Internet explorer {{position($index)}}% wird als Zeichenkette Wert interpretiert und hat daher keine Wirkung

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

Hier ist ein Beispiel für die Ausgabe:

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

Und hier ist ein Fiddle

zu demonstrieren

Hat jemand Vorschläge, wie zu korrigieren?

Answer 1

Sie müssen ng-style anstelle von Stil, sonst einige Browser wie IE ungültig Stil Attributwerte (Vorhandensein von {{}} etc macht es ungültig) entfernen, bevor auch Winkel eine Chance, es zu machen hat. Wenn Sie ng-style angular verwenden, berechnen Sie den Ausdruck und fügen ihm die Inline-Stilattribute hinzu.

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

Da Sie sowieso sind die Position der Berechnung können Sie auch % aus dem position hinzufügen und versenden. Denken Sie auch daran, dass das Aufrufen einer Funktion in ng-repeat die Funktion bei jedem Digest-Zyklus aufruft. Sie sollten also vorsichtig sein, nicht zu intensive Operationen innerhalb der Methode auszuführen.

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

und zurück

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

Demo

Answer 2

Ja, ng-style arbeiten, dieses Problem zu lösen. Sie können den bedingten Stil mit ternary operator verwenden.

HTML:

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

Answer 3

Wenn Sie {{}} Winkel Bindung Ausdruck verwenden wollen wie normale style-Attribut wie style="width:{{someScopeVar}}", Verwendung ng-attr-style und es wird funktionieren perfekt IE (und natürlich andere schlauer sind) :)

überprüfen Sie meine jsFiddle ... überprüft mit Angular JS 1.4.8

hier habe ich die Verwendung von style, ng-style und ng-attr-style

DER 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> 

JS DIE

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

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

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

gezeigt