使用 Angular js 引导进度条颜色

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 实​​现即可。