javascript - 是否可以更改 Angular Material 的禁用事件 mdSwitch 的颜色？

Question

我正在使用 Angular Material md-switch .在文档中，它在启用开关时显示一些不同的颜色。但是我需要一个功能，比如在 Disabled Active 时更改开关的颜色。请帮助我实现这一目标。提前致谢。

<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
  };
});