4

I am creating a web app in which i want to show progress bar depend on the data from my sql server,

for example i am getting my data like(40) in my progress bar width of my progress bar sould be 40% and if my data is 70 width of my progress bar should be 70%

here is my static progress bar

<div class="progress">
    <div class="progress-bar" role="progressbar" aria-valuenow="70"
        aria-valuemin="0" aria-valuemax="100" style="width:70%">
        <span class="sr-only">70% Complete</span>
    </div>
</div>

i am using angularJS so, my data is coming in my controller,

what i need to do to make my progress bar dynamic

Improve this question

2 Answers 2

Reset to default
4

you can try this

<div class="container">
<h2>Basic Progress Bar</h2>
<div class="progress">
<div class="progress-bar" role="progressbar" aria-valuenow="{{value}}" aria-valuemin="0" aria-valuemax="100" style="width:{{value}}%">
  <span class="sr-only">{{value}}% Complete</span>
</div>
</div>
</div>

and in script write in controller and value from sql server to value variable $scope.value= variable

$scope.value= 'sql data variable';
Improve this answer
Sign up to request clarification or add additional context in comments.

Comments

1

Assuming that aria-valuenow attribute is itself dynamic, you can use this:

<div class="progress">
    <div class="progress-bar" role="progressbar" aria-valuenow="{{progressValue}}"
        aria-valuemin="0" aria-valuemax="100" ng-style="{'width':progressValue}">
        <span class="sr-only">70% Complete</span>
    </div>
</div>

In your AngularJS code:

..... function(data) {
 $scope.progressValue = data; // or something else depending upon your app logic.
//....
Improve this answer

Comments