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

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-tab title="About" icon="ion-ios-information" ui-sref="#">

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

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


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

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

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

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

I am vey new on this, sorry.

What do you mean by ‘states’ ?

Please look over the default tabs project setup.

1 Like