CODEWITHSUNDEEP
javascriptcssangularjstwitter-bootstrap
user6656728
user6656728

Reputation:

dynamic bootstrap progress bar in angularJS

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

Upvotes: 4

Views: 7620

Answers (2)

arunkumar talla
arunkumar talla

Reputation: 157

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';

Upvotes: 4

mehulmpt
mehulmpt

Reputation: 16547

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.
//....

Upvotes: 1

Related Questions