角度スコープの値を使用してdivのスタイルを設定してください

Question

私はいくつかのアクティビティのパーセントを示すために水平divを持っています。私はwidth=100%と1つの内側のdivと1つの外側のdivを持っています。コントローラーから取得したパーセンテージ値に基づいて内部のdivを背景色で塗りつぶす必要がありますが、私の問題はパーセンテージ値が$scope可変パーセンテージであることです。

私のコードは以下の通りです：

<div class="outerDiv"> 
<div class="innerDiv" style="'width':{{percentage}}"></div> 

{{percentage}}は私の範囲の値です。しかし、上記のコードは私の必要性は、私は、スコープを使用してのdivのスタイルを設定する必要があることvalue.plz

Answer 1

あなたはあなたのコントローラでng-style="{'width' : width}

を使用することができます助けているので、正常に動作していません。

$scope.width = '50%'; 

Answer 2

あなたのコードはng-styleなしで動作することができますが、一重引用符（'width':{{percentage}}〜width:{{percentage}}）を削除し、変数の最後にpxを追加する必要があります。

angular.module('app', []). 
 
controller('ctrl', function($scope) { 
 
    $scope.percentage = '20%'; 
 
});

.outerDiv { 
 
    height: 100px; 
 
    background: gray; 
 
} 
 

 
.innerDiv { 
 
    height: 100%; 
 
    background: blue; 
 
    width: 0; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> 
 

 
<div class="outerDiv" ng-app="app" ng-controller="ctrl"> 
 
    <div class="innerDiv" style="width:{{percentage}}"></div> 
 
</div>