javascript - 如何隐藏所有 Angular Material 选项卡的选项卡内容

Question

我需要隐藏所有标签的标签体。

<md-tabs class="md-accent" md-align-tabs="{{data.bottom ? 'bottom' : 'top'}}" >
      <md-tab md-active="false">
        <md-tab-label>Layer</md-tab-label>
        <md-tab-body class="rightTabBdy">
          tab1
        </md-tab-body>
      </md-tab>
      <md-tab md-active="false">
        <md-tab-label>Model</md-tab-label>
        <md-tab-body>
          tab2
        </md-tab-body>
      </md-tab>
      <md-tab md-active="false">
        <md-tab-label>Legends</md-tab-label>
        <md-tab-body>
          tab3
        </md-tab-body>
      </md-tab>
 </md-tabs>

根据文档，至少有一个选项卡应该始终处于事件状态，并且 ng-hide/ng-show 也不起作用 :-(。所以我尝试添加一个虚拟选项卡，但它不起作用

<md-tab md-active="true" ng-if="someCond==true">>></md-tab>

在 Controller 中

$scope.someCond = false;

JSFiddle 链接:https://jsfiddle.net/NaghaveerGowda/94h7aq3x/7/

有人可以帮我吗？

Answer 1

设置md-selected一些不存在的选项卡索引，如 md-selected="-1"在 <md-tabs>似乎做到了。

var app = angular.module('sandbox', ['ngMaterial']);
app.controller("MainCtrl", function($scope) {
  $scope.someCond = false;
})

md-tabs-content-wrapper {
  background: green;
}

<link href="https://rawgit.com/angular/bower-material/master/angular-material.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.6/angular.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.6/angular-animate.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.6/angular-aria.js"></script>
<script src="https://rawgit.com/angular/bower-material/master/angular-material.js"></script>
<div ng-app="sandbox">
  <md-tabs class="md-accent" md-selected="-1" md-align-tabs="{{data.bottom ? 'bottom' : 'top'}}">
    <!-- this should be a kind of button to close all tabs -->
    <md-tab md-active="true" ng-if="someCond==true">>></md-tab>
    <md-tab md-active="false">
      <md-tab-label>Layer</md-tab-label>
      <md-tab-body class="rightTabBdy">
        tab1
      </md-tab-body>
    </md-tab>
    <md-tab md-active="false">
      <md-tab-label>Model</md-tab-label>
      <md-tab-body>
        tab2
      </md-tab-body>
    </md-tab>
    <md-tab md-active="false">
      <md-tab-label>Legends</md-tab-label>
      <md-tab-body>
        tab3
      </md-tab-body>
    </md-tab>
  </md-tabs>
</div>

Updated Demo