I wish to pass the detail of an order displayed in an ng-repeat to another function in my controller. I have it working with the first item in my array. How can I expand to display whichever order I have on that page?
When you click on the detail button it creates the required URL, I need this to be created whichever order is currently displayed on the detail page. Working with the first item in the array, can it be expanded to other orders?
https://plnkr.co/edit/nASmvcPakxKpRXDsfKnW?p=catalogue
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'
angular.module('starter', ['ionic','ngCordova'])
.run(function($ionicPlatform) {
$ionicPlatform.ready(function() {
if(window.cordova && window.cordova.plugins.Keyboard) {
// Hide the accessory bar by default (remove this to show the accessory bar above the keyboard
// for form inputs)
cordova.plugins.Keyboard.hideKeyboardAccessoryBar(true);
// Don't remove this line unless you know what you are doing. It stops the viewport
// from snapping when text inputs are focused. Ionic handles this internally for
// a much nicer keyboard experience.
cordova.plugins.Keyboard.disableScroll(true);
}
if(window.StatusBar) {
StatusBar.styleDefault();
}
});
})
.config(function($stateProvider, $urlRouterProvider) {
$stateProvider
.state('tabs', {
url: '/tab',
abstract: true,
templateUrl: 'templates/tabs.html'
})
.state('tabs.home', {
url: '/home',
views: {
'home-tab' : {
templateUrl: 'templates/home.html'
}
}
})
.state('tabs.list', {
url: '/list',
views: {
'list-tab' : {
templateUrl: 'templates/list.html',
controller: 'ListController'
}
}
})
.state('tabs.detail', {
url: '/list/:aId',
views: {
'list-tab' : {
templateUrl: 'templates/detail.html',
controller: 'ListController'
}
}
})
// if none of the above states are matched, use this as the fallback
$urlRouterProvider.otherwise('/tab/home');
})
.controller('ListController', ['$scope', '$http', '$state','$cordovaBluetoothSerial', '$window', '$location', function($scope, $http, $state, $cordovaBluetoothSerial, $window, $location) {
$http.get('js/aboDATAONLY.json').success(function(data) {
$scope.orders = data;
$scope.whichorder = $state.params.aId;
})
$scope.orders = [];
function onPay() {
var itemsArr = [];
var invoice = {};
var myItems = {};
var myItem = {};
var order = $scope.orders[0];
myItem['name'] = order.bkev_name;
myItem['description'] = "A robotic ball that can be controlled via apps";
myItem['quantity'] = bkor_seatcount;
myItem['unitPrice'] = order.bkor_subtotal;
myItem['taxRate'] = '0.0';
myItem['taxName'] = 'Tax';
itemsArr.push(myItem);
myItems['item'] = itemsArr;
invoice['itemList'] = myItems;
invoice['paymentTerms'] = 'DueOnReceipt';
invoice['currencyCode'] = 'GBP';
invoice['discountPercent'] = '0';
invoice['merchantEmail'] ='[email protected]';
invoice['payerEmail'] = '[email protected]';
var returnUrl = order.bkor_seatcount;
var retUrl = encodeURIComponent(returnUrl + "?{result}?Type={Type}&InvoiceId={InvoiceId}&Tip={Tip}&Email={Email}&TxId={TxId}");
//var pphereUrl = "paypalhere://takePayment/?returnUrl={{returnUrl}}&invoice=%7B%22merchantEmail%22%3A%22{{merchantEmails}}%22,%22payerEmail%22%3A%22{{payerEmails}}%22,%22itemList%22%3A%7B%22item%22%3A%5B%7B%22name%22%3A%22{{name}}%22,%22description%22%3A%22{{description}}%22,%22quantity%22%3A%221.0%22,%22unitPrice%22%3A%22{{price}}%22,%22taxName%22%3A%22Tax%22,%22taxRate%22%3A%220.0%22%7D%5D%7D,%22currencyCode%22%3A%22{{currency}}%22,%22paymentTerms%22%3A%22DueOnReceipt%22,%22discountPercent%22%3A%220.0%22%7D";
var pphereUrl = "paypalhere://takePayment/v2?returnUrl=" + retUrl;
pphereUrl = pphereUrl + "&accepted=cash,card,paypal";
pphereUrl = pphereUrl + "&step=choosePayment";
pphereUrl = pphereUrl + '&invoice=' + escape(JSON.stringify(invoice));
console.log(pphereUrl);
return pphereUrl;
}
$scope.pay = function () {
var url = onPay();
window.open(url, "_system");
}
}]);
detail.html
<ion-header-bar class="bar-dark">
<h2 class="title">Order Detail</h1>
</ion-header-bar>
<ion-view>
<ion-content class="has-subheader">
<ion-list class="list-inset">
<ion-item class="item-text-wrap"
ng-repeat="order in orders | filter: { bkor_user: whichorder }">
<h1>Production Name: {{order.bkev_name}}</h1>
<h3>Seatcount: {{order.bkor_seatcount}}</h3>
<h1>Order Subtotal: £{{order.bkor_subtotal}}</h1>
</ion-item>
<button class="button button-block button-dark" ng-click="pay();">Pay Here</button>
</ion-list>
</ion-content>
</ion-view>
JSON data
[
{
"bkor_status": "A",
"bkor_datedmy": "08-02-2016",
"bkor_event": "34",
"bkor_user": "4028",
"bkev_name": "U2 Tribute",
"bkor_seatcount": "5",
"bkor_paymethod": "H",
"bkpay_short": "Cash",
"bkpay_status": "A",
"bkor_paid": "Y",
"bkor_payamount": "44.00",
"bkor_paiddatedmy": "08-02-2016",
"bkor_delivery": "N",
"bkdel_short": "Given",
"bkor_sent": "N",
"bkor_sentdatedmy": null,
"bkor_subtotal": "44.00",
"bkor_bookingfee": "0.00",
"estCardFee": "2.00",
"bkor_handling": "0.00",
"bkor_discount": "0.00",
"bkor_adjustment": "0.00"
},
{
"bkor_status": "A",
"bkor_datedmy": "16-02-2016",
"bkor_event": "35",
"bkor_user": "5001",
"bkev_name": "Fleetwood Mac Tribute",
"bkor_seatcount": "3",
"bkor_paymethod": "H",
"bkpay_short": "Card",
"bkpay_status": "A",
"bkor_paid": "Y",
"bkor_payamount": "28.00",
"bkor_paiddatedmy": "08-02-2016",
"bkor_delivery": "N",
"bkdel_short": "Given",
"bkor_sent": "N",
"bkor_sentdatedmy": null,
"bkor_subtotal": "28.00",
"bkor_bookingfee": "0.00",
"estCardFee": "2.00",
"bkor_handling": "0.00",
"bkor_discount": "0.00",
"bkor_adjustment": "0.00"
}
]
Move the button inside the ng-repeat loop and pass the order to your pay() scope function and then you can pass it to onPay() and not use the hardcoded var order = $scope.orders[0];
HTML
<ion-item class="item-text-wrap"
ng-repeat="order in orders | filter: { bkor_user: whichorder }">
<h1>Production Name: {{order.bkev_name}}</h1>
<h3>Seatcount: {{order.bkor_seatcount}}</h3>
<h1>Order Subtotal: £{{order.bkor_subtotal}}</h1>
<button class="button button-block button-dark" ng-click="pay(order);">Pay Here</button> <-- move this here and pass 'order'
</ion-item>
Controller
function onPay(order) {
var itemsArr = [];
var invoice = {};
var myItems = {};
var myItem = {};
// var order = $scope.orders[0]; <-- remove this
[ ... ]
}
$scope.pay = function (order) {
var url = onPay(order); <-- pass order
window.open(url, "_system");
}