How to put content within ion-tabs without the use of ng-router?

ionic-v1
1

Lets do it fast.

This is the regular behavior of ion-tabs

the reason why I do not need $stateProvider is because I am just hiding and showing some divs. I created this Plnkr for you to check what I want to achieve, in the notes of this Plnkr in the code you can see the necessary notes to understand.

Let me show you some of the code that I am working with, first, this are the ion-tabs:

      <ion-tabs class="tabs-icon-top tabs-striped ">

        <ion-tab title="Home" icon="ion-home" ui-sref="#">
          <ion-nav-view></ion-nav-view>
        </ion-tab>

        <ion-tab title="About" icon="ion-ios-information" ui-sref="#">
          <ion-nav-view></ion-nav-view>
        </ion-tab>

        <ion-tab title="Contact" icon="ion-ios-world" ui-sref="#">
          <ion-nav-view></ion-nav-view>
        </ion-tab>

        <ion-tab title="WAJAJA" icon="ion-ios-world" ui-sref="#">
          <ion-nav-view></ion-nav-view>
        </ion-tab>

      </ion-tabs>

and here you can see the information that I want to display on those tabs:

    <ion-view title="Bet Slip">
      <ion-content>
      
        <!--this info must be in HOME tab-->
        <ion-list ng-show="displayStraight">
          <div>STUFF</div>
        </ion-list>
        
        <!--this info must be in ABOUT tab-->
        <ion-list ng-show="displayParlayRobin">
          <div>MORE STUFF</div>
        </ion-list>
        
        <!--this info must be in CONTACT tab-->
        <ionlist ng-show="displayParlayIfBet">
          <div>OH NO! MORE STUFF</div>
        </ionlist>
        
        <!--this info must be in WAJAJA tab-->
        <ionlist ng-show="displayParlayTeaser">
    
          <div>OH YIZUS! MORE AND MORE STUFF</div>
    
        </ionlist>
      </ion-content>
    </ion-view>

so, at the end, what I want is something like this but with the behavior of the first link I paste above.

2

So for the setup you want, you’d need to use states, as in the default setup for the tabs example.

3

I am vey new on this, sorry.

What do you mean by ‘states’ ?

4

Please look over the default tabs project setup.

1 Like