Управление встроенным стилем с помощью angular не работает в IE

Я хотел установить положение 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];
    }
});

и вот это Скрипка демонстрация

есть ли у кого-нибудь предложения о том, как исправить?

28
angularjs angularjs-ng-repeat html inline-styles internet-explorer

3 ответов

вы должны использовать ng-style вместо стиля, в противном случае некоторые браузеры, такие как IE удалит недопустимые значения атрибутов стиля (наличие {{}} etc делает его недействительным), прежде чем даже угловой имеет шанс отобразить его. Когда вы используете 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] + "%";

демо

44

если вы хотите использовать выражение угловой привязки {{}} так же, как обычный атрибут стиля, как style="width:{{someScopeVar}}", использовать ng-attr-style и он будет отлично работать IE (и, очевидно, другие умнее):)

проверить jsFiddle ... Проверено с угловым 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>

JS

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

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

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

Да ng-style будет работать, чтобы решить эту проблему. Вы можете использовать условный стиль, используя ternary operator.

HTML-код: 

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