How to redirect page according to list item click in ionic?


#1

this is my service.js code

angular.module('app.services', [])

app.factory('Datalists', function() {

   $scope.datalists = [
    { title: 'Discover the properties of matter', id: 1,face:'img/bonecomundo_eng.gif' },
    { title: 'Understand the world of electrons and ions', id: 2,face:'img/bonecoelectroes_eng.gif' },
    { title: 'Learn the basics of pressure, surface tension..', id: 3,face:'img/bonecoforcas_eng.gif' },
    { title: 'Apply your science knowledge. Participate!', id: 4 ,face:'img/bonecoconcurso_eng.gif'},
    { title: 'Learn how to do soap, bath salts..', id: 5 ,face:'img/bonecoproduza_eng.gif'},
    { title: 'Discover the science that happens every day.', id: 6 ,face:'img/bonecosabias_eng.gif'}
  ];
 

  return {
    all: function() {
      return datalists;
    },
    
    get: function(listId) {
      for (var i = 0; i < datalists.length; i++) {
        if (datalists[i].id === parseInt(listId)) {
          return datalists[i];
        }
      }
      return null;
    }
  };
});

this is controller code

.controller('PlaylistsCtrl', function($scope,Datalists) {

  $scope.datalists = Datalists.all();

})

this my app.js code related to this page

.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'
      }
    }
  }

this is HTML code

playlists.html

<ion-view view-title="">
  <ion-content>
     <ion-list>
     <a href="#/app/playlists/{{row.id}}">
                <ion-item ng-repeat="row in datalists" >
       
        <center><div> <img ng-src="{{row.face}}"><br>
          {{row.title}}</div></center>
      </ion-item>
      </a>
    </ion-list>
  </ion-content>
</ion-view>

playlist.html

<ion-view view-title="">
  <ion-content class="padding">
    <img ng-src="{{lists.face}}" style="width: 64px; height: 64px">
    <p>
      {{lists.title}}
    </p>
  </ion-content>
</ion-view>

#2

Here’s a working example: http://www.gajotres.net/ionic-framework-tutorial-5-master-detail-pattern/

Adapt it to your code.