Изменение цвета индикатора загрузки в процентах

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-класс:

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" вместо

Может быть, это работает 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>