css - 如何为 angular-ui-switch 显示不同的背景颜色

Question

我对 angular-ui-switch ( http://ngmodules.org/modules/angular-ui-switch) 有疑问。我想让开关根据每个对象的名称显示不同的背景颜色。以下是我所做的:

-- 我在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 View :

<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>

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

如有任何帮助，我们将不胜感激。非常感谢:-)

Answer 1

(使用 angular-ui-switch 版本 0.1.0 测试)

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

但是，您可以调整个人的风格 <switch/>与 ng-style属性，以覆盖 .switch.checked 产生的背景颜色CSS 类应用于处于“打开”状态的开关。

例如:

<switch id="enabled" name="enabled" ng-model="enabled" ng-style="getStyle(enabled, 'red')" />

在你的 Angular Controller 中定义一个函数:

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