Question

如何使md-tab无法在angularJS上点击？我不想禁用标签内容，只是想让md-tab无法点击，因此用户无法通过点击标签浏览页面：

这是我的代码：

<md-content class="md-padding" >
  <md-tabs md-dynamic-height="" md-border-bottom="" md-selected="selectedIndex">
      <md-tab label="one">
        <md-content class="md-padding">
          <h1 class="md-display-2">Tab One</h1>
          <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla venenatis ante augue. Phasellus volutpat neque ac dui mattis vulputate. Etiam consequat aliquam cursus. In sodales pretium ultrices. Maecenas lectus est, sollicitudin consectetur felis nec, feugiat ultricies mi.</p>
           <md-button class="md-raised md-primary" ng-click="nextTab()">Next</md-button>
        </md-content>
      </md-tab>
      <md-tab label="two">
        <md-content class="md-padding">
          <h1 class="md-display-2">Tab Two</h1>
          <p>Lorem  risus, pulvinar at interdum quis, vehicula sed odio. Phasellus in enim venenatis, iaculis tortor eu, bibendum ante. Donec ac tellus dictum neque volutpat blandit. Praesent efficitur faucibus risus, ac auctor purus porttitor vitae. Phasellus ornare dui nec orci posuere, nec luctus mauris semper.</p>

          <md-button class="md-raised md-primary" ng-click="nextTab()">Next</md-button>
        </md-content>

      </md-tab>

    </md-tabs>
  </md-content>

Answer 1

我找到了解决方案。

从$(document).ready(function(){ $(".TextDiv:not(:first)").css("display","none"); $('input [type="submit"]').click(function(){ $('.TextDivdiv:hidden:first').css("display","block"); }); });开始使用ng-disabled = "true"，并在用户点击下一个按钮时启用它。

Answer 2

在文档中，您有禁用第二个标签的示例（不可点击）：https://material.angularjs.org/latest/demo/tabs。

     <md-tab id="tab2" ng-disabled="data.secondLocked">
        <md-tab-label>{{data.secondLabel}}</md-tab-label>
        <md-tab-body>
          ...
        </md-tab-body>
      </md-tab>

Answer 3

在md-tabs上使用{{1}}属性来获得结果。

来源： https://material.angularjs.org/1.1.4/api/directive/mdTabs

Answer 4

用作

<md-tab id="tab2" [disabled]="data.secondLocked"> <md-tab-label>{{data.secondLabel}}</md-tab-label> <md-tab-body> ... </md-tab-body> </md-tab>

了解详情https://github.com/angular/material2/issues/645

Answer 5

您可以在 md-tabs 中执行此操作

 md-selected="myTabIndex"

并在 md-tab 中

ng-disabled="myTabIndex!==0" and Next

如何让md-tab无法点击？

5 个答案: