Milind Milind - 5 months ago 36
AngularJS Question

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

Answer

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

Comments