How to render content in Ionic tabs without new templates, but by just switching tabs like in bootstrap

Question

We are building a template with three tabs in it. Those tabs are supposed to work like in this example: https://getbootstrap.com/javascript/#tabs-examples

We only want to switch content in the tabs. How can we do that without the need for new templates?

Our detail template is like this:

<ion-view view-title="{{item.summary.name}}">
  <ion-nav-buttons side="left">
    <button class="button button-icon button-clear ion-navicon" menu-toggle="left"></button>
  </ion-nav-buttons>


  <div class="bar bar-subheader bar-assertive">
    <ion-tabs class="tabs-background-assertive tabs-color-light">
      <ion-tab title="Summary">
        <ion-nav-view name="summary" ></ion-nav-view>
      </ion-tab>

      <ion-tab title="Ingridents">
        <ion-nav-view name="ingdts"></ion-nav-view>
      </ion-tab>

      <ion-tab title="Videos">
        <ion-nav-view name="video"></ion-nav-view>
      </ion-tab>

    </ion-tabs>
  </div>

</ion-view>

We tried this, https://stackoverflow.com/a/31506520/170445 but its not working.

Answer 1

If I understand correctly, you can wrap the ion-content of the tab in a ion-pane to use static tabs:

<ion-tab title="Summary">
  <ion-pane>
    <ion-content>
      <!-- Tab content here -->
      Summary content
    </ion-content>
  </ion-pane> 
</ion-tab>

Here is a codepen example

Answer 2

In your controller have some type of object to control the visibility:

 $scope.pageFlow = {
    summary: true,
    ingts: false,
    video: false
 }

Then on you view just show or hide the div's. You could also create a scope method to handle the control, but not needed. One thing to note is that the ion-tabs are outside of the ion-content but inside the ion-view

<ion-view view-title="{{item.summary.name}}">
 <ion-nav-buttons side="left">
    <button class="button button-icon button-clear ion-navicon" menu-toggle="left"></button>
 </ion-nav-buttons>
 <ion-content padding="true" scroll="true" class="has-header">
    <div ng-if="pageFlow.summary">
        Summary Goes Here
    </div>
    <div ng-if="pageFlow.ingdts">
        Ingredients Goes Here
    </div>
    <div ng-if="pageFlow.video">
        Video Goes Here
    </div>
 </ion-content>
 <ion-tabs class="tabs-background-assertive tabs-color-light">>
    <ion-tab title="Summary" on-select="pageFlow.summary = true; pageFlow.video = false; pageFlow.ingdts = false">
    </ion-tab>
    <ion-tab title="Ingridents" on-select="pageFlow.ingdts = true; pageFlow.video = false; pageFlow.other = false">
    </ion-tab>
    <ion-tab title="Videos" on-select="pageFlow.video = true; pageFlow.ingdts = false; pageFlow.other = false">
    </ion-tab>
 </ion-tabs></ion-view>

I should also note, you will only need one controller for the view now since everything is inside the one content page.