2

我想将来自 angular-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

干杯!

4

2 回答 2

1

Angular UI 重写 DOM 以<progress>用<div>. 看来比在这个过程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 */
}
于 2013-10-08T08:40:44.423 回答
0

我建议你也试试ng-style。你的问题在这里解决了

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

在控制器中：

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

就我而言，我按原样从引导程序中获取进度条并进行了更改%

于 2013-10-08T09:03:18.493 回答