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>

在我的客户端控制器中，我设置了颜色：

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

到目前为止，进度条根本不会改变颜色。为了让这个工作，我错过了什么？

修改

我摆脱了我的客户端控制器并添加了一个ng-class：

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有帮助：）

Answer 2

我通过使用uib-progressbar来修复此问题：

我的客户控制器：

var value = c.data.percent_complete;
    var type;

    if (value <= c.options.danger_threshold) {
        type = 'danger';
    } else if (value > c.options.danger_threshold && value <= c.options.warning_threshold) {
        type = 'warning';
    } else if (value > c.options.warning_threshold && value <= c.options.primary_threshold) {
        type = 'primary';
    } else {
        type = 'success';
    }

    c.percentage_label = value+'%';
    c.type = type;

我修改过的HTML：

<uib-progressbar style="height: {{c.options.bar_height}}px;" class="progress-striped active" value="c.data.percent_complete" type="{{c.type}}">
    <div>
      <span style="font-size: {{c.options.font_size}};">{{c.percentage_label}}</span>
      <i ng-if="c.data.empty.length>0" class="fa fa-info-circle info m-l-xs" popover-placement="{{c.dynamicPopover.placement}}" popover-trigger="mouseenter" uib-popover-template="c.dynamicPopover.templateUrl" popover-title="{{c.data.empty.length}} Required Fields Missing"></i>
    </div>
  </uib-progressbar>

根据百分比更改引导进度条颜色

2 个答案: