使用角度js的Bootstrap进度条颜色

Question

我想知道当百分比值增加时，我们怎样才能使progress bar改变颜色。

我希望进度条显示红色（危险）直到33％。然后将蓝色调高至66％，然后变为绿色直至100％。可以使用angular js完成吗？

Answer 1

使用ng-class。

ui.bootstrap使用这种技术对其评级控制有一个很好的例子：

ng-class="{'label-warning': percent<33, 'label-info': percent>=33 && percent<66, 'label-success': percent>=66}"

这也适用于进度条。你只需要在某处定义百分比。 http://plnkr.co/iBliMPYnWbsJJCtzqWTu

更新：
以下是用于引导进度条的类：

ng-class="{'progress-bar-danger': percent<33, 'progress-bar-info': percent>=33 && percent<66, 'progress-bar-success': percent>=66}"

Answer 2

您可以使用angular-ui bootstrap's <progressbar>指令。 您建议的百分比颜色存在于其颜色集合中，以便在您定义的进度的特定状态中指定为类型。可以在控制器中操纵这些状态定义，例如颜色从特定值百分比的变化。只需使用<progressbar>指令跟随angular-ui实现。