Combining angular-ui progressbar with ngClass

Question

I would like to combine the directive progress from angular-ui, with the directive ngClass.

So far I don't get any reactions at all. Am I doing this wrong, or is it not possible to combine?

What I want is a progressbar that has the class active when the background process is working, but turns off when it's complete or errnous.

HTML:

<progress max="100" percent="progress" class='progress-striped' 
    ng-class='{"active": active}'></progress>  

JS:

$scope.active = true;
$scope.progress = {value:10, type:"danger"};

See my plunkr at http://plnkr.co/edit/koR0VnTKdpnhhMuD16hl

Cheers!

Answer 1

I suggest you also to try ng-style. Your problem is solved here

<div class="container_progress">
     <div class="progress progress-striped"   ng-class='{"active": active, "":!active}'>
       <div  class="bar" ng-style="bar_upload_style" >{{bar_upload_text}}</div>  
     </div>
</div>

And in controller:

updateProgressBar(20);

 $timeout(function()
 {
 updateProgressBar(100);
 }, 4000);


function updateProgressBar(value){
 $scope.bar_upload_style = {  "width": value+'%'  };
 $scope.bar_upload_text = value + "%";

 if(value ==100) $scope.active = false;
}

See Plunker

In my case I took progress bar from bootstrap as is and changed %

Answer 2

Angular UI rewrite the DOM to replace <progress> tag with <div>. It appears than in this process ng-class is omitted.

You can resolve your problem by wrapping your progress bar in another <div> and add your ng-class directive on this element. After you can add styles on .active .progress.

HTML :

<div ng-class='{"active": active}'>
    <progress max="100" percent="progress" class='progress-striped'></progress> 
</div>

CSS :

.active .progress {
    /* Put your styles here */
}