How to set up the master-detail view in the Ionic Lab starter "Sidemenu"?

ionic-v1
1

I’m a command line-phobic designer, using Ionic Lab to learn the basics. I have the starter template “Sidemenu”, which is some sort of almost-functioning music app. It mainly shows off the side menu – which works fine, but slightly annoyingly the master-detail pattern included in the Playlist part of the app seems only partly set up. The master (list) view uses an array of data, but the detail view is just using a generic hardcoded bit of HTML. It must be very easy to go one step further and have both the master and detail views reading from the same array, displaying different data in the different templates (which have been setup already, as has the controller for the detail view – but it’s empty)… but I’m struggling to work out what the correct approach is.

Can someone please point me in the right direction?

Edit: here’s some code…

Listing view:

<ion-view view-title="Playlists">
  <ion-content>
    <ion-list>
      <ion-item ng-repeat="playlist in playlists" href="#/app/playlists/{{playlist.id}}">
        {{playlist.title}} – 
        {{playlist.content}}
        <p>{{playlist.id}}</p>
      </ion-item>
    </ion-list>
  </ion-content>
</ion-view>

Detail view:

<ion-view view-title="Playlist">
  <ion-content>
    <h1>Playlist</h1>
    <ion-item class="card">
        <div class="item item-text-wrap">
            {{playlist.title}}
            Bar
        </div>
        <div class="item item-text-wrap">    
            Foo
            {{playlist.content}}
        </div>
    </ion-item>
  </ion-content>
</ion-view>

app.js:

.config(function($stateProvider, $urlRouterProvider) {
  $stateProvider

   ... some other states here

    .state('app.playlists', {
      url: '/playlists',
      views: {
        'menuContent': {
          templateUrl: 'templates/playlists.html',
          controller: 'PlaylistsCtrl'
        }
      }
    })

  .state('app.single', {
    url: '/playlists/:playlistId',
    views: {
      'menuContent': {
        templateUrl: 'templates/playlist.html',
        controller: 'PlaylistCtrl'
      }
    }
  });
  // if none of the above states are matched, use this as the fallback
  $urlRouterProvider.otherwise('/app/playlists');
});

controllers.js

.controller('PlaylistsCtrl', function($scope) {
  $scope.playlists = [
    {
        content: 'Integer legentibus erat a ante historiarum dapibus.',
        title: 'Reggae',
        id: 1 
    },
    { 
        content: 'Pellentesque habitant morbi tristique senectus et netus.',
        title: 'Chill',
        id: 2 
    }
  ];
})

.controller('PlaylistCtrl', function($scope, $stateParams) {
    // empty, as it is by default, but I've tried adding data here and nothing happens
});

The data in the detail view does not load. I guess I need to set something else up?

Any help – even if it’s just something I should read about myself, would be much appreciated.

2

i have the same problem as you… :disappointed:

3

See https://github.com/jeffmaury/hierachicalstates as a sample although it does not work for displaying authors

1 Like