Manipolazione stile in linea con angolare non funziona in IE

Question

ho voluto impostare la posizione di un div in base al valore di ritorno di una funzione in un controller angolare

Il seguente funziona bene in Firefox e in Chrome, ma in Internet esploratore {{position($index)}}% viene interpretato come valore stringa letterale e quindi non ha effetti

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

Ecco un esempio del problema:

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

Ed ecco un Fiddle per dimostrare

Qualcuno ha suggerimenti su come rettificare?

Answer 1

È necessario utilizzare ng-style invece di stile, altrimenti alcuni browser come IE rimuoverà i valori degli attributi di stile non validi (presenza di {{}} ecc rende non valida) prima ancora di angolare ha la possibilità di renderlo. Quando si utilizza ng-style l'angolare calcolerà l'espressione e gli aggiungerà gli attributi di stile in linea.

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

Dal momento che si sta comunque calcolare la posizione si potrebbe anche aggiungere % dal position e inviarlo. Ricorda inoltre che chiamare una funzione in ng-repeat invocherà la funzione ogni ciclo di digest, quindi dovresti fare attenzione a non fare troppe operazioni intensive all'interno del metodo.

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

e tornare

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

Demo

Answer 2

Sì, ng-style lavorerà per risolvere questo problema. Puoi usare lo stile condizionale usando ternary operator.

HTML:

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

Answer 3

Se si desidera utilizzare angolare espressione vincolante {{}} proprio come attributo di stile normale come style="width:{{someScopeVar}}", uso ng-attr-style e funzionerà perfettamente IE (e, ovviamente, altri quelli più intelligenti) :)

controllare il mio jsFiddle ... Controllato con Angular JS 1.4.8

qui mi hanno mostrato l'utilizzo di style, ng-style e ng-attr-style

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

IL JS

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

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

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