Manipulacja stylem w wierszu za pomocą angular nie działa w IE

Musisz użyć

ng-style
https://docs.angularjs.org/api ... Style
zamiast stylu, w przeciwnym razie niektóre przeglądarki, takie jak

IE

, usuwają nieprawidłowe wartości atrybutów stylu (posiadanie

{{}}

itp. czyni je nieprawidłowymi) nawet zanim angular będzie w stanie renderuj to. Używając

ng-style

angular oceni wyrażenie i doda do niego wbudowane atrybuty stylu.

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

Ponieważ i tak obliczasz pozycję, możesz również dodać

%

z

position

i przesłać go. Pamiętaj również, że wywołanie funkcji w ng-repeat wywoła tę funkcję w każdym cyklu skrótu, więc możesz uważać, aby nie wykonywać zbyt intensywnych operacji wewnątrz metody.

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

i wróć

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

Demonstracja
http://jsfiddle.net/ct7y2dv4/

Jeśli chcesz użyć wyrażenia kątowego

{{}}

bind, tak jak zwykłego atrybutu stylu, takiego jak

style = "width: {{someScopeVar}}"

,
użyj

ng-attr-style

,

i będzie działał dobrze na IE (i oczywiście inni są mądrzejsi) :)
Sprawdź mój

jsFiddle
http://jsfiddle.net/0s4twkhv/2/... testowane z Angular JS 1.4.8
tutaj pokazałem użycie

style

,

ng-style

i

ng-attr-style

W HTML

<div ng-app="app">

 <div ng-controller="controller"> <div style="background:{{bgColor}}">

 This will NOT get colored in IE

  <div ng-attr-style="background:{{bgColor}}">

 But this WILL get colored in IE

  <div ng-style="styleObject">

 And so is this... as this uses a json object and gives that to ng-style

  

IP

var app = angular.module('app', []);app.controller('controller', function($scope) { $scope.bgColor = "yellow"; 

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

});

Tak, Styl NG będzie działać, aby rozwiązać ten problem. Możesz użyć konwencjonalnego stylu za pomocą

Terrary Operator

.

HTML

:

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