CODEWITHSUNDEEP
javascriptcssangularjsangular-material
Milind
Milind

Reputation: 1955

Material AngularJS ngShow and ngHide

I have created tabs in angularjs with material. I am hiding its tabs content from beginning. How can I show content on tab click with some animation. Some of my codes 

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

My code pen http://codepen.io/milindsaraswala/pen/NrRZYV

Upvotes: 0

Views: 790

Answers (1)

Muthukannan Kanniappan
Muthukannan Kanniappan

Reputation: 2079

You will need a function this 

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

          $scope.tabs[index] = true;
        }

and this being called on tab click. I have updated your codepen. I am not sure about your specific requirement, since md-tabs should do this implicitly.

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

Upvotes: 1

Related Questions