Question

我在我的网页上使用angular-ui-switch。我在交换机的两侧都有开/关标签。开关工作正常，但是当切换开关切换为关闭时，我需要更改文本的颜色，反之亦然。当滑块位于该侧时，标签文本应为黑色，而另一侧则为蓝色。

HTML：

<div class="toggle-container">
    <div class="switch-label" ng-class="{enabled:enabled.laww, disabled:!enabled.laww}">Off</div>
        <switch ng-model="enabled.laww" ng-init="enabled.laww=false" class="green unchecked">
            {{ enabled }}
        </switch>
    <div class="switch-label" ng-class="{enabled:!enabled.laww, disabled:enabled.laww}">On</div>
</div>

CSS：

.enabled {
      color: #337ab7;
}
.disabled {
      color: #000;
}

我一直在搜索，似乎ng-class可能是要走的路，但我不确定这是如何适合我的代码，因为我已经有class。我该怎么办呢？

修改

我在两个标签上添加ng-class="{enabled:enabled.laww}"，当我打开或关闭开关时，标签会改变颜色，但它们会同时变为相同的颜色。当它打开或关闭时，我需要它们替换颜色。我是否需要将另一个类添加到ng-class？

修改2

我明白了！我必须向ng-class添加一个禁用类，并为了切换颜色而使用非真实状态。请参阅上面的代码进行修复。

Answer 1

是的，您可以使用ng-class实现此目的。您可以使用类似对象的表示来表示类：

<div class="{switch-label: enable.laww}">On</div>

因此，将根据分配给它的值打开class属性。在这种情况下，enable.laww的值将用于激活/取消激活switch-label的值。

我在plunker中添加了一个示例：http://plnkr.co/edit/dxkM8mCkLYTMfuusm09x?p=preview

使用Javascript：

var myApp = angular.module("myApp", []).
    controller("MyController", function($scope) {
    $scope.myCheckBox = true;
});

在css中：

.greenbg {
     background: lightgreen;
}

在HTML中：

<input type="checkbox" ng-model="myCheckBox">Click me
<div ng-class="{greenbg: myCheckBox}">I'm just some div</div>

您可以在此处找到更多详细信息和示例：https://docs.angularjs.org/api/ng/directive/ngClass

使用复选框

1 个答案: