如何在AngularJS中显示进度条中的百分比文本?

时间:2017-09-04 06:18:32

标签: javascript angularjs

我正在尝试在上传任何内容时在我的页面中包含百分比进度条。进度条工作正常,但问题是它没有显示百分比文本。它只显示%符号。任何人都可以帮助我。

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

1 个答案:

答案 0 :(得分:1)

试试这个:

在你的HTML中:

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

在您的控制器中:

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

}

当您从动态html中调用一个返回值的方法时,它将在运行时绑定该值。您必须在返回uploadprogressartedit值的任何方法中进行uploadEventHandler进度计算。还要确保您创建的方法应在范围内定义。