Geek Answers Handbook

How to place content in ion tabs without using ng-router?

Lets do it fast.

This is the regular behavior of the ion tabs.

the reason I don't need $stateProviderit is because I just hide and show some divs. I created this Plnkr so that you can 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 I'm working with, firstly, this 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 these 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 in the end I want something like this , but with the behavior of the first link that I insert above.

+1
1

, .

<ion-view view-title="Tabs">
    <ion-pane>
        <ion-tabs class="tabs-bottom">

            <!-- Tab 1 -->
            <ion-tab title="Tab 1" href="#/tab/tab1">
                <ion-nav-view name="tab-tab1">
                    <ion-content>
                        Tab 1 content
                    </ion-content>

                </ion-nav-view>
            </ion-tab>


            <!-- Tab 2 -->
            <ion-tab title="Tab 1" href="#/tab/tab2">
                <ion-nav-view name="tab-tab2">
                    <ion-content>
                        Tab 2 content
                    </ion-content>
                </ion-nav-view>
            </ion-tab>
        </ion-tabs>

    </ion-pane>
</ion-view>
+1

More articles:


All Articles