css - 根据百分比更改 Bootstrap 进度条颜色

Question

我使用 Bootstrap 创建了一个进度条，并希望颜色根据百分比动态变化。到目前为止，这是我的代码的样子:

<div class="progress" style="height: {{c.options.bar_height}}px;">
  <div class="progress-bar progress-bar-striped active {{c.progress_bar_color}}" role="progressbar" aria-valuenow={{c.data.percent_complete}} aria-valuemin="0" aria-valuemax="100" style="width:{{c.data.percent_complete}}; font-size: {{c.options.font_size}};">
      {{c.data.percent_complete}} 
  </div>
</div>

在我的客户端 Controller 中，我设置了这样的颜色:

if(c.data.percent_complete<=50) {
    c.progress_bar_color = 'progress-bar-danger';
}  
if(c.data.percent_complete>50 && c.data.percent_complete<=75) {
    c.progress_bar_color = 'progress-bar-warning';  
}  
if(c.data.percent_complete>75 && c.data.percent_complete<=99.99) {
    c.progress_bar_color = 'progress-bar-primary';
}  
if(c.data.percent_complete==100) {
    c.progress_bar_color = 'progress-bar-success';
}

到目前为止，进度条根本没有改变颜色。我缺少什么才能让它发挥作用？

---

编辑

我摆脱了客户端 Controller 并添加了一个 ng 类:

ng-class="{'progress-bar-danger': c.data.percent_complete<'33', 'progress-bar-warning': c.data.percent_complete>='33' && c.data.percent_complete<'66', 'progress-bar-success': c.data.percent_complete>='66'}"

这适用于所有情况，除非它是 100%。当进度条达到 100% 时，无论出于何种原因，它都会变为进度条危险而不是进度条成功。任何建议如何解决这个问题？谢谢!

Answer 1

可以尝试使用 ng-class="c.progress_bar_color" 代替

也许这个working JSFiddle有帮助:)