Change the colour of the Progress-bar in between if a process gives some error

Question

I am new to angularjs . I am using progress-bar. So, Here

I have a upload functionality where user can upload many files.In that to show progress I am using the progressBar. So, My code for the progress bar is like -

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

So here In 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;

                }
              }

Now

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

Now when there is an error like toaster.error then if 50% is completed then after that if error is there then it should take the next portion in red colour and the if next one processed successfully then should fill the portion in green its original colour. How can I achieve this ? Can any one help me with this ?

(_Additionally_) [You shouldn't pollute your `$rootScope`](https://stackoverflow.com/questions/32761540/why-using-rootscope-with-functions-is-not-recommended). Instead bind your variables to `$scope` or create a Service/Factory for your logic/processing to [share the data between your controllers](https://stackoverflow.com/questions/21919962/share-data-between-angularjs-controllers). — Aleksey Solovey, Jan 03 '18 at 10:11

score 0 · Answer 1 · answered Jan 03 '18 at 09:50

Personally, I would use the angular ng-class directive to handle color changes.

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

just create classes for the color changes you need then apply then through the directive with your logic as to when it should show.

Change the colour of the Progress-bar in between if a process gives some error

1 Answers1