axy108 axy108 - 3 months ago 35
HTML Question

Change bootstrap progress-bar width from angularjs

I'm new in Angularjs and I am trying to update the width of a progress bar when a value in my controller change.

I have something like:

<span id="percentage">$ {{getTotal()}} ({{getPercentage()}}%)</span>
<div class="progress-bar progress-bar-warning"
role="progressbar" aria-valuenow="10" aria-valuemin="0"
aria-valuemax="100" style="width: 10%">
<span class="sr-only">10% Complete (warning)</span>
</div>


And I have in my controller something like:

$scope.total = 254.78;
$scope.threshold = 15000;

$scope.getPercentage = function () {
return (($scope.total * 100) / $scope.threshold).toFixed(2);
}
$scope.getTotal = function () {
return $scope.total;
}


How do I update the width value of the progress bar?

Thanks,
Alberto.

Answer

ng-style directive would do the trick.

<span id="percentage">$ {{getTotal()}} ({{getPercentage()}}%)</span>
<div class="progress-bar progress-bar-warning" 
  role="progressbar" aria-valuenow="{{getPercentage()}}" aria-valuemin="0" 
  aria-valuemax="100" ng-style="{width : ( getPercentage() + '%' ) }">
    <span class="sr-only">{{getPercentage()}}% Complete (warning)</span>
</div>
Comments