[SOLVED] Help with JSON detail page


#1

Hi,

I can get the JSON file to display correctly in a list but I cannot for the life of me get the lookup to work so that when a user taps an item in the list they will be taken to a detail page. (pretty much just how the Friends tab etc works in the sample app).

App.js

			// 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.controllers', 'starter.services'])

			.run(function($ionicPlatform) {
			  $ionicPlatform.ready(function() {
				// Hide the accessory bar by default (remove this to show the accessory bar above the keyboard
				// for form inputs)
				if(window.cordova && window.cordova.plugins.Keyboard) {
				  cordova.plugins.Keyboard.hideKeyboardAccessoryBar(true);
				}
				if(window.StatusBar) {
				  // org.apache.cordova.statusbar required
				  StatusBar.styleDefault();
				}
			  });
			})

			.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

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

				// Each tab has its own nav history stack:

				.state('tab.Offers', {
				  url: '/Offers',
				  views: {
					'tab-Offers': {
					  templateUrl: 'templates/tab-Offers.html',
					  controller: 'MainCtrl'
					}
				  }
				})
				.state('tab.Offer-detail', {
				  url: '/offer/:itemid',
				  views: {
					'tab-Offers': {
					  templateUrl: 'templates/offer-detail.html',
					  controller: 'OfferDetailCtrl'
					}
				  }
				})
				
				
				.state('tab.friends', {
				  url: '/friends',
				  views: {
					'tab-friends': {
					  templateUrl: 'templates/tab-friends.html',
					  controller: 'FriendsCtrl'
					}
				  }
				})
				.state('tab.friend-detail', {
				  url: '/friend/:friendId',
				  views: {
					'tab-friends': {
					  templateUrl: 'templates/friend-detail.html',
					  controller: 'FriendDetailCtrl'
					}
				  }
				})

				.state('tab.account', {
				  url: '/account',
				  views: {
					'tab-account': {
					  templateUrl: 'templates/tab-account.html',
					  controller: 'AccountCtrl'
					}
				  }
				})
				
				.state('tab.help', {
				  url: '/help',
				  views: {
					'tab-help': {
					  templateUrl: 'templates/tab-help.html',
					  controller: 'HelpCtrl'
					}
				  }
				})
				
				.state('tab.contact', {
				  url: '/contact',
				  views: {
					'tab-contact': {
					  templateUrl: 'templates/tab-contact.html',
					  controller: 'ContactCtrl'
					}
				  }
				})
				
				.state('tab.Earnings', {
				  url: '/Earnings',
				  views: {
					'tab-Earnings': {
					  templateUrl: 'templates/tab-Earnings.html',
					  controller: 'EarningsCtrl'
					}
				  }
				});

			  // if none of the above states are matched, use this as the fallback
			  $urlRouterProvider.otherwise('/tab/Offers');

			});

controllers.js

 angular.module('starter.controllers', [])


			.controller('FriendsCtrl', function($scope, Friends) {
			  $scope.friends = Friends.all();
			})

			.controller('FriendDetailCtrl', function($scope, $stateParams, Friends) {
			  $scope.friend = Friends.get($stateParams.friendId);
			})

			.controller('AccountCtrl', function($scope) {
			})

			.controller('HelpCtrl', function($scope) {
			})

			.controller('ContactCtrl', function($scope) {
			})

			.controller('EarningsCtrl', function($scope) {
			})


			.controller('MainCtrl', function($scope, $stateParams, Offers) {
				Offers.getitems().then(function(items){
					//users is an array of user objects
					$scope.items = items;
				});	
			})

			.controller('OfferDetailCtrl', function($scope, $stateParams, Offers) {
				$scope.item = Offers.getitem($stateParams.itemid)
			});

services.js

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

			/**
			 * A simple example service that returns some data.
			 */

			 .factory('Offers', function($http) {
				var items = [];

				return {
					getitems: function(){
						return $/JSON/').then(function(response){
							items = response;
							return items.data.deals;
						});
					},
					getitem: function(itemid) {
				  // Simple index lookup
					return items.data.deals[itemid];
					}
				}
			})

Offer-detail.html

			<!--
			  This template loads for the 'tab.friend-detail' state (app.js)
			  'friend' is a $scope variable created in the FriendsCtrl controller (controllers.js)
			  The FriendsCtrl pulls data from the Friends service (service.js)
			  The Friends service returns an array of friend data
			-->
			<ion-view title="{{item.itemid}}">
			  <ion-content has-header="true" padding="true">

			  </ion-content>
			</ion-view>

Any help would be much appreciated.