web-dev-qa-db-ja.com

angularを使用したインラインスタイルの操作は、IE

angularコントローラの関数の戻り値に基づいて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];
    }
});

そして、これは フィドル 実証する

誰が修正する方法についての提案がありますか？

htmlangularjsinternet-explorerangularjs-ng-repeatinline-styles
30
andrew

スタイルの代わりに ng-style を使用する必要があります。そうしないと、IEのような一部のブラウザは、angularの前でも無効なスタイル属性値を削除します（{{}}などが存在します）それをレンダリングするチャンス。 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] + "%";

デモ

49
PSL

angularバインディング式{{}}をstyle="width:{{someScopeVar}}"などの通常のスタイル属性と同様に使用する場合は、ng-attr-styleそしてそれは完全に動作しますIE（そして明らかに他のよりスマートなもの）:)

check my 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>

THE JS

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

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

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

はい、ng-styleはこの問題を解決するために機能します。 ternary operatorを使用して条件付きスタイルを使用できます。

HTML：

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