CODEWITHSUNDEEP
javascriptangularjs
Musheer Aiman
Musheer Aiman

Reputation: 175

How to show percentage text in progress bar in AngularJS?

I am trying to include the percentage progress bar in my page when we upload anything.The progress bar is working fine but the issue is it is not showing the percentage text. It is just showing % symbol. Can anyone help me with this.

 <div class="col-md-12">
    <span ng-if="submittedArt && !myFile" class='erroMassge'>Please choose an image to upload</span>
    <span id="percentage" ng-show="progressBarEdit">{{uploadprogress | number: 0}} %</span>
    <md-progress-linear class="md-warn" md-mode="buffer" value="{{uploadprogressartedit}}" ng-show="progressBarEdit"></md-progress-linear>
 </div>

Controller.js

uploadEventHandlers: {
    progress: function(e) {
        if (e.lengthComputable) {
            $scope.uploadprogressartedit = (e.loaded / e.total) * 100;
        }
    }
 }

Upvotes: 0

Views: 3632

Answers (1)

Karan Desai
Karan Desai

Reputation: 3142

Try this:

In your html:

 <md-progress-linear class="md-warn" md-mode="buffer" value="{{showProgress()}}" ng-show="progressBarEdit"></md-progress-linear>

In your controller:

showProgress:function(){
uploadEventHandlers: {
    progress: function(e) {
        if (e.lengthComputable) {
            $scope.uploadprogressartedit = (e.loaded / e.total) * 100;
        }
    }
 }
return $scope.uploadprogressartedit; 

}

When you call a method from html dynamically which returns the value, it will bind that value in run time. You have to make your uploadEventHandler progress calculation in any method that returns the uploadprogressartedit value. Also make sure that method you create should be defined in scope.

Upvotes: 1

Related Questions