Material AngularJS ngShow 和 ngHide

Question

我在 angularjs 中使用 material 创建了标签页。我从一开始就隐藏了它的标签内容。如何使用某些动画在选项卡单击上显示内容。我的一些代码

<div flex="100" class="bookingBox" layout-align="center center" layout="row">
    <md-content flex="35">
      <md-tabs md-dynamic-height md-border-bottom md-center-tabs>
        <md-tab label="Item 1" ng-click="bookFlight()">
          <md-content class="md-padding ng-hide">
            Item 1
          </md-content>
        </md-tab>
        <md-tab label="Item 2" ng-click="myb()">
          <md-content class="md-padding ng-hide">
            Item 2
          </md-content>
        </md-tab>
        <md-tab label="Item 3" ng-click="olci()">
          <md-content class="md-padding ng-hide">
            Item 3
          </md-content>
        </md-tab>
      </md-tabs>
    </md-content>

我的码笔http://codepen.io/milindsaraswala/pen/NrRZYV

Answer 1

您将需要一个函数

        function showTab(index) {
          var tabsLength = $scope.tabs.length;
          for(var i = 0 ; i < tabsLength ; i++) {
            $scope.tabs[i] = false;
          }

          $scope.tabs[index] = true;
        }

这是在选项卡单击时调用的。我已经更新了你的codepen。我不确定您的具体要求，因为 md-tabs 应该隐式执行此操作。

http://codepen.io/anon/pen/WxGqmN

Material AngularJS ngShow 和 ngHide

Material AngularJS ngShow and ngHide

javascript

css

angularjs

angular-material