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

Question

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

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

Answer 1

您可以使用 angular 中的 watch 方法来监视 ng-model 变量以在其中定义逻辑。

Answer 2

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

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

Is it possible to change the color of disabled active mdSwitch of Angular material?

javascript

angularjs

angularjs-material