How do I transition from a list item to an item view …

ionic-v1
1

Hi,

I’m new to both Ionic and Angular.js. I’m trying to something as simple as clicking a list item to view a detail view with no success. Here’s my Codepen: http://codepen.io/anon/pen/hwlkf

2

i don’t think this will work what you did.

First problem would be the the ion-content inside the body. if I’m right this will be shown every time. For this put everything inside a template. except for this:

<ion-nav-bar class="nav-title-slide-ios7 bar-positive">
      <ion-nav-back-button class="button-icon ion-arrow-left-c">
     </ion-nav-back-button>
</ion-nav-bar>

<ion-nav-view animation="slide-left-right" ></ion-nav-view>

this where the page/site will be rendered + the style of the navbar.

Then data should be handled with service/factory - for later when you implement $http to get json data from server.
this is a simple factory for the data:

.factory('StoreData',function(){
  var store = {
    data: [ 
      { id: 1, "address": "Viktoriagatan 5", "telephone": "031-137411", 
       "chain": { "name": "Sebago Store",  "website": "http://www.sebago.se" } },
      { id: 2, "address": "Viktoriagatan 6", "telephone": "031-137411", 
       "chain": { "name": "Sebago Mega", "website": "http://www.sebago.se"} },
      { id: 3, "address": "Viktoriagatan 7", "telephone": "031-137411",
       "chain": { "name": "Sebago Mini", "website": "http://www.sebago.se"} } ],

    all: function(){
      return store.data;
    },
    getById: function(idx){
      return store.data[idx];
    }
  };
  return store;
});

and here is the a simple example of master-detail view:

http://codepen.io/Auro/pen/Agvap