Css 如何显示角度ui开关的不同背景色

我对angular ui switch（）有疑问。我想让开关根据每个对象的名称显示不同的背景色。以下是我所做的：

--I css文件中定义的颜色如下：

.switch {
  background: #fff;
  border: 1px solid #dfdfdf;
  position: relative;
  display: inline-block;
  box-sizing: content-box;
  overflow: visible;
  width: 50px;
  height: 30px;
  padding: 0px;
  margin: 0px;
  border-radius: 20px;
  cursor: pointer;
  box-shadow: rgb(223, 223, 223) 0px 0px 0px 0px inset;
  transition: 0.3s ease-out all;
  -webkit-transition: 0.3s ease-out all;
  top: -1px;
}
.switch small {
  background: #fff;
  border-radius: 100%;
  box-shadow: 0 1px 3px rgba(0,0,0,0.4);
  width: 30px;
  height: 30px;
  position: absolute;
  top: 0px;
  left: 0px;
  transition: 0.3s ease-out all;
  -webkit-transition: 0.3s ease-out all;
}
.switch.checked {
  background: rgb(100, 189, 99);
  border-color: rgb(100, 189, 99);
}
.switch.checked small {
  left: 22px;
}

.switch.red
{
    background: rgb(187, 2, 2);
}
.switch.primary
{
    background: rgb(74, 124, 173);
}
.switch.green
{
    background: rgb(16, 124, 42);
}

以下是我的Html视图：

<div ng-repeat="es in allEventSources track by $index" style="margin-top:5px; vertical-align:middle; line-height:40px">
                                    <span style="float:left; margin-top:8px; font-size:16px;">{{es.name}}:</span>
                                    <span style="float:right; margin-top:8px;"><switch class="{red: es.name=='Boston', primary: es.name=='New York', green: es.name=='Washington' }" ng-model="es.enabled"  ng-click="toggleEventSource(es)"></switch></span>

                                </div>

{{es.name}}：

但是，我的开关总是只显示绿色作为背景色。这里有人知道为什么吗

任何帮助都将不胜感激。非常感谢：-）

（使用

角度ui开关测试
版本
0.1.0
）

如果编辑
.switch.checked
css类，则将全局更改所有开关

但是，您可以使用
ng style
属性调整单个
的样式，以覆盖由
.switch.checked
css类应用于处于“打开”状态的开关所产生的背景色

例如：


在角度控制器中定义一个函数：

$scope.getStyle = function(enabled, color) {
 return {
  'background': enabled?color:'white',
  'border-color': enabled?color:'white'
 }
}