List and Detail View next to each other


#1

Hi, I am trying to get a list and the detail page next to each other like explained in this article for ionic 1:

http://blog.scottlogic.com/2015/10/02/ionic-master-detail.html

Unfortunately, with the new navigation and push and pop stuff I am not getting my head around how to get this work with the new navigation concept.

Has one of you ever achieved that or point me in the right direction?

Best Frank


#2

Bump :grin:

Not getting it … tried different approaches yesterday and was almost so far to put the list as ion-col onto the main page. I surely can’t be the only one with this problem can I?

Would be so great to hear any other ideas.


#3

i would create two different state-branches in the app-state tree.

The one for tablets has two ui-views/ion-nav --> a left one where you hang in your list and a right one for the detail page.

if no detail page is opened, i would hang in the first detail page per default. so you simple pop the old detail-route of stack and the new detail page on the nav-stack if you change the detail page.

Thats it

The other navigation branch for smartphones with small dimensions is simple --> only one default ion-nav and on every page-change you push the state on the stack and on back you pop it


#4

Hi Bengt, thanks for your answer.

Regarding state-branches:

At the moment I have a loginPage which is the root page. So your suggestion would be to navigate (after login) to the next page dependent of platform.isMobile (for example)?

Than the splitting on the tablet page would be done with two ion-nav’s and then a this.selected for example?

Thx again
Best Frank


#5

right! you got it :slight_smile:


#6

Is there anyone who has an example of a basic split view like you mention? I understand the concept but want to see the code to make sure it is what I think.


#7

i built somethind long time ago, how to have different state-branches for phone or tablet for example:

The repo is the combination of:
http://market.ionic.io/starters/event-app-and-maps

and

http://market.ionic.io/starters/event-app-and-maps-tablet