Example list and details page


I want to create a list view that when you click on the list item a details view slides into place.

Does anyone know an example of something like this.


I’m interested too.

Do you mean like an accordion where the content drops below?

Hi, no what I’m looking to do is have a list view, then when you click on one of the list items the full details page slides in from the right, taking over the main page. This make sense?

why dont use the seed project?

Yes, it makes sense. So you define a view in your app’s config. That view will have a template and controller for the “details” page.

The seed project pointed out above has a sample of this.

Ah, the problem I’m having could be because I’m not updating config file. I’ll go through the seed project and see what I’m doing wrong. Thanks all

When I say “config”, I do not mean the “config.xml” file. I mean the .config in your app declaration that lists all the states and views.

This stuff:

// Ionic Starter App

// angular.module is a global place for creating, registering and retrieving Angular modules
// 'starter' is the name of this angular module example (also set in a <body> attribute in index.html)
// the 2nd parameter is an array of 'requires'
// 'starter.services' is found in services.js
// 'starter.controllers' is found in controllers.js
angular.module('starter', ['ionic', 'starter.services', 'starter.controllers'])

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

  // Ionic uses AngularUI Router which uses the concept of states
  // Learn more here: https://github.com/angular-ui/ui-router
  // Set up the various states which the app can be in.
  // Each state's controller can be found in controllers.js

    .state('bigList', {
        url : '/bigList',
        templateUrl : 'templates/big-list.html',
        controller : 'BigListController'

    // setup an abstract state for the tabs directive
    .state('tab', {
      url: "/tab",
      abstract: true,
      templateUrl: "templates/tabs.html"