List and Detail View next to each other

zishor · April 30, 2016, 1:23pm

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

zishor · May 2, 2016, 12:47pm

Bump

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.

bengtler · May 2, 2016, 2:26pm

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

zishor · May 2, 2016, 7:28pm

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

bengtler · May 3, 2016, 5:54am

right! you got it

mdlallemont · October 17, 2016, 7:22pm

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.

bengtler · October 18, 2016, 5:36am

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

github.com

KillerCodeMonkey/ionic-starter-eventmaps-combined/blob/master/www/app/routes.js

define([
  'app',
  // Load Controllers here
  'controllers/app',
  'controllers/dashboard',
  'controllers/results',
  'controllers/detail'
], function (app) {
  'use strict';
  // definition of routes
  app.config([
    '$stateProvider',
    '$urlRouterProvider',
    function ($stateProvider, $urlRouterProvider) {
      // url routes/states
      $urlRouterProvider.otherwise('/');

      $stateProvider
        // app states
        .state('phone', {

This file has been truncated. show original

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