각도가 있는 인라인 스타일을 조작하는 것은 IE에서는 동작하지 않습니다.

각도가 있는 인라인 스타일을 조작하는 것은 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];
    }
});

그리고 여기에 바이올린이 있습니다.

수정 방법에 대해 제안해 주실 분 계십니까?

스타일 대신 ng-style을 사용해야 합니다.그렇지 않으면 일부 브라우저는 다음과 같습니다.IE잘못된 스타일 속성 값을 제거합니다(예:{{}}etc는 그것을 무효로 한다).사용할 때ng-styleangular는 식을 계산하고 인라인 스타일 속성을 추가합니다.

<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] + "%";

데모

각도 바인딩 식을 사용하려는 경우{{}}와 같은 일반적인 스타일의 특성처럼style="width:{{someScopeVar}}", 를 사용하면, IE 가 완전하게 동작합니다(또, 확실히 그 외의 스마트한 것도 있습니다).

내 jsFiddle 확인...Angular 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"};
});

네.ng-style이 문제를 해결합니다.조건부로 스타일을 사용할 수 있습니다.ternary operator.

HTML:

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

언급URL : https://stackoverflow.com/questions/25655434/manipulating-inline-style-with-angular-does-not-work-in-ie