Question

我在angularjs中创建了带材质的标签。我从头开始隐藏其标签内容。如何通过动画显示选项卡单击上的内容。我的一些代码

<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

材料AngularJS ngShow和ngHide

1 个答案: