Изменить цвет текста ярлыка с помощью флажка

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?

Edit 2

Я понял это! Мне пришлось добавить отключенный класс к ng-class и не истинное состояние, чтобы цвета переключались. Пожалуйста, см. Выше код для исправления.

Answer 1

Да, вы можете достичь этого, используя ng-класс. Вы можете представлять класс с объектом типа представления:

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

Следовательно, атрибут класса будет включен на основании значения, присвоенного ему. В этом случае значение enable.laww будет использоваться для активации/деактивации значения метки переключателя.

Я прилагаю пример в 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