防止 md-switch 切换点击线

Question

我正在使用 md-switch 在 Angular 应用程序中显示切换。当我在任何地方单击它打开的线路时，开关都会切换。但是我已经将开关与其他控件放在一条线上，所以我只希望它在单击实际开关时切换，而不是它之外的某些内容。我如何指示它表现得像这样？

片段：

<md-list-item class="md-1-line" ng-repeat="rule in vm.rules | filter:{name:groupedRule.name}">
<div style="width: 40px;">{{rule.threshold}}</div>
<div flex>
    <md-slider min="10" max="40" ng-model="rule.threshold">
    </md-slider>
</div>
<div style="width: 40px;">
    <md-switch ng-model="rule.enabled"></md-switch>
</div>

更新这是演示该问题的代码笔：http://codepen.io/jsiegmund/pen/repwyR

更新 GitHub 上的问题 #7937：https://github.com/angular/material/issues/7937#issuecomment-207793522

Answer 1

您可以将 md-list-item 替换为 div - CodePen

标记

<div ng-controller="SwitchDemoCtrl" ng-app="MyApp">
  <md-list>
    <div layout="row" layout-align="center center">
      <div style="width: 40px;"> {{ data.threshold }} </div>
      <div flex>
        <md-slider min="10" max="30" step="1" ng-model="data.threshold">
        </md-slider>
      </div>
      <div layout-align="end center" flex-offset="5">
        <md-switch ng-model="data.cb1" aria-label="Switch 1">
          Switch 1: {{ data.cb1 }}
        </md-switch>
      </div>
    </div>
  </md-list>
</div>

Answer 2

截至当前日期，此问题的正确解决方案是添加 class，如下所示：

<md-list-item class="md-no-proxy">

这将阻止整行列表项可点击。

md-list-item documentation link

防止 md-switch 切换点击线

Prevent md-switch toggle clicking line

angularjs

angular-material