CODEWITHSUNDEEP
javascripthtmlcssangularjs
Sulu.MeanStack
Sulu.MeanStack

Reputation: 319

Set style for a div using angular Scope value

I have a horizontal div to show the percent of some activity. I have one outer div with width=100% and one inner div. I have to fill the inner div with background color based on percentage value obtained from the controller, but my problem is that percentage value is in $scope variable percentage.

My code is below:

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

{{percentage}} is my scope value. But the above code is not working fine so my need is that, I have to set style for div using scope value.plz help

Upvotes: 1

Views: 1604

Answers (2)

Mosh Feu
Mosh Feu

Reputation: 29249

Your code can work without ng-style, but you need to remove the single quote ('width':{{percentage}} to width:{{percentage}}) and add px in the end of your variable. 

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>

Upvotes: 1

riteshmeher
riteshmeher

Reputation: 874

You can use ng-style="{'width' : width}

In your controller:

$scope.width = '50%';

Upvotes: 4

Related Questions