I have this mobile app where it lists a record of encoded transport/taxi receipt. The first page seen when opening the app is the list of receipt.
templates/list-view.html
<ion-item class="card item item-light" ng-click="edit({{receipt.id}})" ng-repeat="receipt in receipts|orderBy:'receiptDate'">
...
</ion-item>
...
<ion-footer-bar class="bar-subfooter taxi-subfooter">
<div class="row">
<div class="col">
<button ng-click="addRecord(-1)" class="button button-block"><i class="icon ion-plus-round"></i></button>
</div>
</div>
if I click the item or if I click the button with addRecord(-1), it will go to the add/edit receipt page:
templates/edit-receipt.html
<ion-content padding="true" class="has-header has-footer taxi-has-subfooter">
<div class="table">
<div class="row">
<div class="col title">Paper receipt provided?</div>
<div class="col taxi-col">
<label class="toggle toggle-balanced">
<input type="checkbox" ng-model="bindReceipt.hasReceipt">
<div class="track taxi-track">
<div class="handle taxi-handle"></div>
</div>
</label>
<input type="hidden" ng-model="bindReceipt.id" />
</div>
</div>
<div class="row">
<div class="col title">Date</div>
<div class="col taxi-col"><input type="date" ng-model="bindReceipt.receiptDate" /></div>
</div>
<div class="row">
<div class="col title">Vendor</div>
<div class="col taxi-col"><input type="text" placeholder="Name of the Taxi" ng-model="bindReceipt.taxiVendor" /></div>
</div>
<div class="row">
<div class="col title">Fare</div>
<div class="col taxi-col"><input type="tel" placeholder="0.00" ng-model="bindReceipt.fare" /></div>
</div>
</div>
</ion-content>
<ion-footer-bar class="bar-subfooter taxi-subfooter">
<div class="row"> <!-- update() functions also as add -->
<div class="col taxi-col"><button class="button button-block" ng-click="update()">{{transType}}</button></div>
</div>
</ion-footer-bar>
What I did in its behavior for back button of the phone is if the state is on the add/edit page, it will just go back to the list page, and if the state is on the list page, no matter how many times the user will go from/to list and edit pages, it should exit the app (no going back of the app history). So, I used navigator.app.exitApp() for the backbutton on the list page.
templates/list-view.html uses ReceiptsCtrl controller so I put there my event listener for backbutton:
app.controller('ReceiptsCtrl', function($window, $scope, $filter, $state, $http, $ionicPopup, Receipts) {
$scope.receipts = Receipts.getReceipts();
$scope.historyBack = function(evt) {
if(evt != null) {
if(evt.preventDefault) {
evt.preventDefault();
}
}
var location = $window.location.href;
if(location.charAt(location.length-1) === '/') {
navigator.app.exitApp(); // exit the application
} else {
history.go(-1);
}
}
document.addEventListener('backbutton', $scope.historyBack, false);
});
services.js
.factory('Receipts', function($window, $filter) {
var receipts = JSON.parse($window.localStorage.getItem('receipts')) || [];
return {
getReceipts: function() {return receipts;}
}
});
Here's my problem, I have this scenario in my app after I build and run in android:
- opening the app. 0 record initially
- add two items - 2 records in the list page
- currently on the list page then exit the app (navigator.app.exitApp() triggers)
- open the app again, 2 records is still there
- add one item - 3 records in the list page
- on the list page again then exit app
- open the app, missing list
Screenshot of the scenario here
That is not happening when I do not use the backbutton event listener, but I find it annoying if it go through history swinging between list and edit page before exiting the app.
I use $window.localStorage for storing data then pass it on $scope.receipts for the list ng-repeat, I tried debugging it by inserting alert() with the receipt object fetched from localStorage as argument. There is a value on the alert message but listing is not working. Another thing also is that it can still compute the total fare from the $scope.receipts (as stated in the screenshot also).
Many thanks.
android
