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>