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

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

1 个答案:

Updated Demo