Question

我想将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

干杯！

Answer 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 */
}

Answer 2

我建议你也试试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

在我的情况下，我按原样从bootstrap取得了进度条并更改了%

将angular-ui进度条与ngClass结合使用

2 个答案: