材料 AngularJS ngShow 和 ngHide答案

【问题标题】：Material AngularJS ngShow and ngHide材料 AngularJS ngShow 和 ngHide
【发布时间】：2016-06-21 14:25:50
【问题描述】：

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

【问题讨论】：

我尝试了你的代码，我只是从所有地方删除了 ng-hide..我的东西正在工作。
@RahulPawar 实际上，我有目的地放置 ng-hide，因为最初我想隐藏，我只想在标签点击时打开它

标签： javascript css angularjs angular-material

【解决方案1】：

你需要这个函数

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

          $scope.tabs[index] = true;
        }

这在标签点击时被调用。我已经更新了你的代码笔。我不确定您的具体要求，因为 md-tabs 应该隐式执行此操作。

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

【讨论】：