31

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

そして、ここにデモンストレーションするフィドルがあります

修正方法に関する提案はありますか？

4

3 に答える 3

50

style の代わりにng-styleを使用する必要があります。そうしないと、angular でレンダリングする前に、IE無効なスタイル属性値を削除する (etc が存在すると無効になる)ようなブラウザーもあります。angular{{}}を使用すると、式が計算され、インライン スタイル属性が追加されます。ng-style

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

デモ

于 2014-09-04T00:10:22.617 に答える
31

{{}}のような通常のスタイル属性と同じように角度バインディング式を使用する場合はstyle="width:{{someScopeVar}}"、使用するng-attr-styleと完全に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"};
});
于 2016-04-06T07:57:53.273 に答える