각도 ui 진행 막대를 ngClass와 결합

Question

각도 -ui의 지시문 진행을 지시문 ngClass와 결합하고자합니다.

지금까지 전혀 반응을 얻지 못했습니다. 이 잘못하고 있습니까, 아니면 결합 할 수 없습니까?

내가 원하는 것은 백그라운드 프로세스가 작동 중일 때 클래스가 활성화되어 있지만 진행 중이거나 잘못되었을 때 꺼지는 진행 표시 줄입니다.

HTML :

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

JS :

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

이 http://plnkr.co/edit/koR0VnTKdpnhhMuD16hl

환호에 내 plunkr하세요!

Answer 1

도 ng-style을 시도 내가 당신을 제안한다. 그대로

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

내 경우 Plunker

를 참조하십시오 내가 부트 스트랩에서 진행 표시 줄을 데리고 %

Answer 2

<progress> 태그를 <div>으로 바꾸려면 각도 UI로 다시 작성하십시오. 이 과정에서 나타납니다 ng-class가 생략되었습니다.

진행률 표시 줄을 다른 <div>에 랩핑하고이 요소에 ng-class 지시문을 추가하여 문제를 해결할 수 있습니다. 스타일을 추가하면 .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 */ 
}