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.