javascript - 如果过程出现错误,则更改中间进度条的颜色

标签 javascript jquery html css angularjs

我是 angularjs 的新手。我正在使用 进度条。所以,这里

我有一个上传功能,用户可以上传许多文件。为了显示进度,我正在使用 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>                  

所以在 Controller 中,

 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 填充其原始颜色的部分。我怎样才能做到这一点?谁能帮我解决这个问题?

最佳答案

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

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

只需为您需要的颜色更改创建类,然后根据您的逻辑应用指令,确定何时显示。

关于javascript - 如果过程出现错误,则更改中间进度条的颜色,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/48074839/

相关文章:

javascript - React Native 中获取请求 post 方法

jquery - 在 for 循环中从 jQuery 编写 CSS

php - 使可编辑的 div 在 div 长度末尾换行

javascript - 无法在html中调用.js(使用knockout)

javascript - 选择菜单刷新下一个选择菜单onChange

javascript - 格式存储用户浏览器的语言

javascript - 在javascript中访问另一个窗口中窗口的全局变量

html - 表格不会使用 flexbox 垂直居中

javascript - 悬停时父级内的目标标签

jquery拖放: Droppable doesnt work on elements with float:left or inline-block