CODEWITHSUNDEEP
angularjsangular-material
mikelplhts
mikelplhts

Reputation: 1221

md-tab-body outside of md-tabs

I'm using the md-tabs but I would like the content, that is what is stated in md-tab-body, you can somehow declare outside. For example:

<md-tabs ...>
    <md-tab>
        <md-tab-label>Tab 1</md-tab-label>
    </md-tab>
    <md-tab>
        <md-tab-label>Tab 2</md-tab-label>
    </md-tab>
    <md-tab>
        <md-tab-label>Tab 3</md-tab-label>
    </md-tab>
</md-tabs>
<div layout="row">
    <div flex="50">
        <md-tab-body>Body for md-tab 1</md-tab-body>
        <md-tab-body>Body for md-tab 2</md-tab-body>
        <md-tab-body>Body for md-tab 3</md-tab-body>
    </div>
    <div class="map" flex="50">...</div>
</div>

Is there any way to do this? Also the not separate, but I wish the md-tab-body is divided with a div in common, in this case div.map.

Upvotes: 1

Views: 740

Answers (2)

Siva
Siva

Reputation: 2785

I too had similar requirement but i couldn't find a direct solution, but this is how i did.

in view

<md-tabs ...>
<md-tab md-on-select="selectTab('md-tab-1')">
    <md-tab-label>Tab 1</md-tab-label>
</md-tab>
<md-tab md-on-select="selectTab('md-tab-2')">
    <md-tab-label>Tab 2</md-tab-label>
</md-tab>
<md-tab md-on-select="selectTab('md-tab-3')">
    <md-tab-label>Tab 3</md-tab-label>
</md-tab>
</md-tabs>
<div layout="row">
<div flex="50">
    <md-tab-body ng-Show="isSelected('md-tab-1')">Body for md-tab 1</md-tab-body>
    <md-tab-body ng-Show="isSelected('md-tab-2')">Body for md-tab 2</md-tab-body>
    <md-tab-body ng-Show="isSelected('md-tab-3')">Body for md-tab 3</md-tab-body>
</div>
<div class="map" flex="50">...</div>
</div>

in controller

$scope.selectedTab = 'md-tab-1';

$scope.selectTab = function(tab) {
$scope.selectedTab = tab;
}

$scope.isSelected = function(tab) {
return tab === $scope.selectedTab;
}

You can also map each tab to a route/controller and load your content dynamically by following the above example.

Upvotes: 2

kuhnroyal
kuhnroyal

Reputation: 7553

No there is no no way. However you can use md-selected="data.selectedIndex" and something like ui-view/ng-view depending on how you manage your views. Track the tab index and change views.

Upvotes: 0

Related Questions