使用ng-style向进度条添加动态样式

Question

我需要的是：

<progress ng-style={background-color: variable } ></progress>

但是为了让它在chrome和firefox中工作，样式应该是这样的。

progress::-webkit-progress-bar{
   background-color: red;
}                                     //chrome

progress::-moz-progress-bar {  
    background-color: red;
}                                     //firefox

其中为progress::-webkit-progress-bar设置ng-style是不可能的。那么我如何通过ng-style动态地提供样式呢..有什么建议吗？

Answer 1

如何为进度条背景颜色变化定义类，以便可以添加所有浏览器前缀，并通过在class属性中插入变量来添加变量？

例如，CSS类

.progress-red::-webkit-progress-bar,
.progress-red::-moz-progress-bar{
    background-color: red;
}

.progress-blue::-webkit-progress-bar,
.progress-blue::-moz-progress-bar{
    background-color: blue;
}

和你的HTML

<progress class="progress-{{variable}}"></progress>

或者，您可以使用进度条库，如Bootstrap或将自己的进度条库定义为exemplified in this JSFiddle