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];
}
});
そして、これは フィドル 実証する
誰が修正する方法についての提案がありますか?
スタイルの代わりに 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] + "%";
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"};
});
はい、ng-style
はこの問題を解決するために機能します。 ternary operator
を使用して条件付きスタイルを使用できます。
HTML:
<div ng-style="{'display':showInfo?'block':'none'}">
</div>