从 md-list-item (AngularJS Material) 中删除点击行为答案

【问题标题】：Remove click behaviour from md-list-item (AngularJS Material)从 md-list-item (AngularJS Material) 中删除点击行为
【发布时间】：2018-12-05 03:43:18
【问题描述】：

在 AngularJS Material 中，我想要一个简单的列表，而不是可点击的项目，只是具有正确间距的文本。我无法制作不可点击的列表！

我查看了文档，但我不明白为什么总是添加 class="md-clickable"... 这是我的代码：

https://codepen.io/anon/pen/zaJpGY

<md-content class="acc-content">


          <md-list>
              <md-list-item>
                <md-checkbox ng-disabled="true" ng-checked="true"></md-checkbox>
                <p class="md-list-item-text">Agree to terms and conditions</p>
              </md-list-item>
              <md-list-item>
                <md-checkbox></md-checkbox><p>Provide personal details</p>
              </md-list-item>
              <md-list-item>
                <md-checkbox></md-checkbox><p>Bank details</p>
              </md-list-item>
          </md-list>


    </md-content>

如何使这些列表项不可点击？

【问题讨论】：

您可以使用以下命令轻松禁用复选框：[disabled]="boolean"
你为什么不直接删除<mg-checkbox>标签。如果用户无法点击它们，那么保留它们是没有用的。
我想要复选框。如果您查看我的代码，您会发现有些代码被禁用了。

标签： css angularjs angular-material material-design

【解决方案1】：

解决方案是禁用您的list-item。

<md-content class="acc-content">
      <md-list>
          <md-list-item ng-disabled="true"> <!-- here -->
            <md-checkbox ng-disabled="true" ng-checked="true"></md-checkbox>
            <p class="md-list-item-text">Agree to terms and conditions</p>
          </md-list-item>
          <md-list-item>
            <md-checkbox></md-checkbox><p>Provide personal details</p>
          </md-list-item>
          <md-list-item>
            <md-checkbox></md-checkbox><p>Bank details</p>
          </md-list-item>
      </md-list>
</md-content>

【讨论】：

是的，效果很好！我没想到会尝试
+ 我将添加一个额外的 CSS 类来禁用悬停鼠标指针，然后它就完美了:)
很遗憾需要额外的观察者。
它真的需要一个观察者吗，因为它需要一个非插值？

【解决方案2】：

您可以将class="md-no-proxy" 添加到您的md-list-item 标签中

见https://material.angularjs.org/latest/api/directive/mdListItem

<md-content class="acc-content">
      <md-list>
          <md-list-item class="md-no-proxy"> <!-- here -->
            <md-checkbox ng-disabled="true" ng-checked="true"></md-checkbox>
            <p class="md-list-item-text">Agree to terms and conditions</p>
          </md-list-item>
          <md-list-item>
            <md-checkbox></md-checkbox><p>Provide personal details</p>
          </md-list-item>
          <md-list-item>
            <md-checkbox></md-checkbox><p>Bank details</p>
          </md-list-item>
      </md-list>
</md-content>

【讨论】：