将angular-ui进度条与ngClass结合起来

我想将angular-ui的指令进度与ngClass指令结合起来。将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"};

见我plunkr在http://plnkr.co/edit/koR0VnTKdpnhhMuD16hl

干杯！

来源

2013-10-08 user2591197

为了澄清，class .active被设置为progre ssbar，所以它动画滚动效果。更新plunkr以反映这一点。 – user2591197

看我的编辑，看起来像你想要的工作 –

我建议你也去尝试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-08 09:03:18

该解决方案有效。这不是很漂亮，但：我会尝试找到一个解决方案，其中仍然使用angular-ui-bootstrap。我认为我可以在模板内为progress指令添加一个ng-class-directive。最后将它推送到他们的github会很好。这样复制粘贴出现的问题是progress指令的所有功能都丢失了。但也许这不是问题，现在进展指令并不是那么广泛。 – user2591197

请让我知道如果你会找到解决方案 –

我还没有尝试过很多其他的东西，但最终，这工作完美，有一些变化。在第一个div上使用ng-class ='{“active：active}'，然后在innerdiv上使用ng-class ='{”bar-danger“：danger，”bar-success“：success}'。我们可以这样做ng-class ='{“bar-danger”：statusClass ==“danger”，“bar-success”：statusClass =“success”}' 不幸的是，这意味着角度的所有特征-ui-bootstrap都没有了，但是在我的情况下没问题，谢谢。 – user2591197

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-08 08:40:44 Elorfin

谢谢。我更新了plunkr以反映如果将活动类添加到进度中会发生什么情况，我认为使用此解决方案也可能实现此目标？ – user2591197

回答

相关问题