Question

I'm using md-switch to display a toggle inside of an Angular app. When I click the line it's on, anywhere, the switch toggles. But I've got the switch on a line with other controls so I only want it to toggle when the actual switch is clicked, not some content outside it. How do I instruct it to behave like this?

Snippet:

<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>

Update Here's a code pen demonstrating the issue: http://codepen.io/jsiegmund/pen/repwyR

Update Issue #7937 on GitHub: 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

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

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

这将阻止整个列表项可单击。

md-list-item documentation link

Prevent md-switch toggle clicking line

2 个答案: