如何隐藏所有角度材料选项卡的选项卡内容

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>

在控制器中

$scope.someCond = false;

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

任何人都可以帮助我吗？

Answer 1

将md-selected 设置为一些不存在的标签索引，例如<md-tabs> 上的md-selected="-1" 似乎可以做到这一点。

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