如果进程出现错误，请更改Progress-bar的颜色

Question

我是angularjs的新手。我正在使用progress-bar。所以在这里

我有一个上传功能，用户可以上传许多文件。为了显示进度，我使用的是progressBar。那么，我的进度条代码就像 -

<uib-progressbar
  class="progress-striped active"
                    ng-show="folderProcessing && !isSingleFile"
                    animate="true" max="100"
                    value="progressValuePercentage"
                    type="success">
                    <i>
                        <span>
                            {{progressValuePercentage}} / 100
                        </span>
                    </i>                  

所以这里在控制器中，

 if (($rootScope.progressValue !== $rootScope.totalFiles)) {
                $rootScope.folderProcessing = true;
                $rootScope.progressValue = $rootScope.progressValue + 1;
                $rootScope.progressValuePercentage = (($rootScope.progressValue * 100) / $rootScope.totalFiles).toFixed(2);
                if ($scope.progressValue === $rootScope.totalFiles) {
                  $rootScope.progressValue = 0;
                  $rootScope.progressValuePercentage = 0;

                }
              }

现在

if (docType === AppConstants.docType.RESUME) {
                if(res.isProcessedSuccessfully) {
                  toastr.success(AppConstants.fileProcessSuccessMessage, 'File processed successfully');
                } else {

                  toastr.error(res.documentId, 'File Processing Failed');
                }
             } else {
                $rootScope.folderProcessing = false;
                toastr.success(AppConstants.jobDescriptionSuccessMessage, 'File processed successfully');
                $scope.hideProcessSpinner =  true;
              }

现在当像toaster.error这样的错误然后如果50％完成然后在那之后如果有错误那么它应该采取red颜色的下一部分和如果下一个处理成功然后应该填充green部分的原始颜色。我怎样才能做到这一点？谁能帮我这个 ？

Answer 1

就个人而言，我会使用角度ng-class指令来处理颜色变化。

https://docs.angularjs.org/api/ng/directive/ngClass

只需为您需要的颜色更改创建类，然后通过指令应用您应该显示的逻辑。