是否可以更改Angular材质的禁用活动mdSwitch的颜色？

Question

我正在使用Angular Material https://github.com/GoogleCloudPlatform/python-docs-samples/blob/master/bigquery/cloud-client/stream_data.py。在文档中，当启用开关时，它会显示一些不同的颜色。但我需要一个功能，比如在禁用激活时更改开关的颜色。请帮助我解决这个问题。提前谢谢。

<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方法来监视ng-model变量以定义其中的逻辑。