Можно ли изменить цвет отключенного активного mdSwitch углового материала?

Question

Я использую угловой материал md-switch. В документации это показывает другой цвет, когда переключатель включен. Но мне нужна такая функциональность, как изменение цвета переключателя, когда он находится в отключенном активном состоянии. Пожалуйста, помогите мне в достижении этого. Заранее спасибо.

<md-switch aria-label="Switch 11" ng-class="{'md-checked':database.somevalue.value['alarm']}" 
            ng-disabled="true"> Alarm
</md-switch>

Answer 1

Вот и все - CodePen

CSS

md-switch[disabled].activeDisabled .md-container > div
{
  cursor: default;
  background: lightgreen;
}

md-switch[disabled].activeDisabled .md-container > div > div
{
  background: green;
}

наценка

<div ng-controller="SwitchDemoCtrl" ng-cloak="" ng-app="MyApp">
  <md-switch ng-class="{activeDisabled: data.cb1}" ng-disabled="true" aria-label="Disabled active switch" ng-model="data.cb1">
    Switch (Disabled, Active)
  </md-switch>

  <md-switch ng-class="{activeDisabled: data.cb2}" ng-disabled="true" aria-label="Disabled active switch" ng-model="data.cb2">
    Switch (Disabled, Active)
  </md-switch>

  <md-switch ng-class="{activeDisabled: data.cb3}" ng-disabled="true" aria-label="Disabled active switch" ng-model="data.cb3">
    Switch (Disabled, Active)
  </md-switch>
</div>

JS

angular.module('MyApp',['ngMaterial'])
.controller('SwitchDemoCtrl', function($scope) {
  $scope.data = {
    cb1: true,
    cb2: false,
    cb3: false
  };
});

Answer 2

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