web-dev-qa-db-fra.com

Manipulation du style en ligne avec angular ne fonctionne pas dans IE

Je voulais définir la position d'un div en fonction de la valeur de retour d'une fonction dans un contrôleur angular

Ce qui suit fonctionne correctement dans FireFox et dans chrome mais dans Internet Explorer {{position($index)}}% est interprété comme une valeur de chaîne littérale et n'a donc aucun effet

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

Voici un exemple du problème:

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

Et voici un Violon démontrer

Quelqu'un a-t-il des suggestions sur la façon de rectifier?

htmlangularjsinternet-explorerangularjs-ng-repeatinline-styles
30
andrew

Vous devez utiliser ng-style au lieu de style, sinon certains navigateurs comme IE supprimeront les valeurs d'attributs de style invalides (présence de {{}} etc le rend invalide) avant même angular a une chance de le rendre. Lorsque vous utilisez ng-style angular calculera l'expression et y ajoutera les attributs de style en ligne.

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

Puisque vous calculez de toute façon la position, vous pouvez également ajouter % à partir du position et envoyez-le. Souvenez-vous également que l'appel d'une fonction dans ng-repeat invoquera la fonction à chaque cycle de résumé, vous pouvez donc faire attention à ne pas faire trop d'opérations intensives à l'intérieur de la méthode.

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

et retour

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

Démo

49
PSL

Si vous souhaitez utiliser angular {{}} tout comme l'attribut de style normal comme style="width:{{someScopeVar}}", utilisez ng-attr-style et cela fonctionnera parfaitement IE (et évidemment d'autres plus intelligents) :)

check my jsFiddle ... Checked with Angular JS 1.4.8

ici, j'ai montré l'utilisation de style, ng-style et ng-attr-style

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

LE JS 

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

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

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

Oui, ng-style fonctionnera pour résoudre ce problème. Vous pouvez utiliser un style conditionnel à l'aide de ternary operator.

HTML:

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