2016-06-21 10 views
0

材料でanglejsのタブを作成しました。私は最初からタブのコンテンツを隠しています。いくつかのアニメーションでタブクリックでコンテンツを表示するにはどうすればいいですか? 私のコードの一部材質AngularJS ngShowとngHide

<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

+0

私はuが私はちょうどすべてのover..i事からNG非表示を削除しています取り組んでいるコードrを試してみました。 –

+0

@RahulPawar実際には、当初は隠れたいと思っていたので、タブでクリックしてみたい – Milind

答えて

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-tabは暗黙的にこれを行う必要があるため、あなたの特定の要件についてはわかりません。

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

関連する問題