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视图：

<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类应用于＆＃34; on＆＃34;状态。

例如：

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

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

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

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

1 个答案: