Legen Sie Stil für ein Div mit Winkel Scope-Wert

Question

Ich habe eine horizontale div, um den Prozentsatz einiger Aktivität anzuzeigen. Ich habe ein äußeres div mit width=100% und einem inneren div. Ich muss die innere div mit Hintergrundfarbe basierend auf Prozentwert von der Steuerung erhalten, aber mein Problem ist, dass Prozentwert in $scope variablen Prozentsatz ist.

Mein Code ist unten:

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

{{percentage}} mein Umfang Wert ist. Aber der obige Code funktioniert nicht in Ordnung, so mein Bedürfnis ist, dass, ich habe Stil setzen für div Umfang mit

Answer 1

value.plz helfen können, verwenden Sie ng-style="{'width' : width}

In Ihrem Controller:

$scope.width = '50%'; 

Answer 2

Ihr Code funktioniert ohne ng-style, aber Sie müssen das einfache Anführungszeichen ('width':{{percentage}} zu width:{{percentage}}) entfernen und px am Ende Ihrer Variablen hinzufügen.

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>