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-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.

回答1:

I had the same problem, I fixed it like this.

<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>

来源：https://stackoverflow.com/questions/28160159/how-to-put-content-within-ion-tabs-without-the-use-of-ng-router

标签

angularjs

ionic-framework