阻止md开关切换单击行

Question

我正在使用md开关在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 class="md-no-proxy">

这将使整行列表项无法单击。

md列表项文档链接

Answer 2

您可以用div-CodePen 替换md-list-item

标记

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