Example list and details page

ionic-v1
1

Hi,

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.

Stephen

2

I’m interested too.
Thanks

3

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

4

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?

5

why dont use the seed project?

6

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.

7

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

8

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

    .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"
    })