How to push dynamic data to JavaScript object? - ionic-framework

Question

I am new to the Ionic Framework. I just started building a few functionalities in AngularJS. Here, what I want is to enter the email and booking ID of a user in an HTML page and then redirect it to other pages which displays all email ids and booking id... Here is my code:
Reservation.html:
<form ng-submit = "goBooking(data)">
<div class="list">
<label class="item item-input">
<input type="text" placeholder="Enter Your Email Id" ng-model="data.emailId" required>
</label>
<label class="item item-input">
<input type="text" placeholder="Enter Your Booking Id" ng-model="data.bookingID" required>
</label>
</div>
<div class="padding">
<input type="submit" class="button button-block button-positive" value = "Submit" />
</div>
</form>
</ion-content>
</ion-view>
Reservation.JS
Controller.js:
.controller('reservationCtrl', function($scope, $state, $stateParams) {
$scope.toDoListItems = [{
emailId: 'versha',
bookingID: '123'
}, {
emailId: 'rahul',
bookingID: '456'
}];
$scope.getTotal = function(){
return $scope.toDoListItems.length;
}
$scope.goBooking = function(data){
$scope.toDoListItems.push({emailId:data.emailId,bookingID:data.bookingID});
$state.go('myBookingDetails');
data.emailId = ' ';
data.bookingID = ' ';
};
});
myBookingDeatils.html:
<ion-view view-title="Hotel Reception">
<ion-content>
<ion-list>
<ion-item ng-controller = "reservationCtrl" ng-repeat="item in toDoListItems">
<p> Welcome {{item.emailId}} !!!! </p>
ion-item>
</ion-list>
</ion-content>
</ion-pane>
</ion-view>
After running this,
I am getting output as
Welcome, Versha!!
Welcome, Rahul!!
I am not getting that email ID and Booking ID. What I am entering on my Reservation.html. I think my input values are not being set in the toDoListItems.
Somewhere, this code is not inserting the values $scope.toDoListItems.push({emailId:data.emailId,bookingID:data.bookingID});
Please Suggest!! Thanks in Advance!!

Answer 1

I am assuming you are using the same controller for each state? When you change states you reload your controller, which resets your $scope.toDoListItems array to it's inital state. You are going to want to save your toDoListItems in a Service. So...
Controller:
.controller('reservationCtrl', function($scope, $state, $stateParams, toDo) {
$scope.getTotal = function(){
return toDo.toDoListItems.length;
}
$scope.goBooking = function(data){
toDo.toDoListItems.push({
emailId:data.emailId,
bookingID:data.bookingID
});
$state.go('myBookingDetails');
data.emailId = null;
data.bookingID = null;
};
});
Service:
.factory('toDo', [function () {
var toDoListItems = [{
emailId: 'versha',
bookingID: '123'
}, {
emailId: 'rahul',
bookingID: '456'
}];
return {
toDoListItems : toDoListItems
};
}]);
This will ensure that the data survives the state change, however if you want this data to persist permanently and stay on page reloads etc.. you will need to hook up a database, if you are purely a front end guy I suggest looking at Firebase

Answer 2

A very simple way to accomplish this would be to just use $localstorage.
Something like this:
$scope.goBooking = function(data){
$scope.toDoListItems.push({emailId:data.emailId,bookingID:data.bookingID});
$localstorage.setObject('toDoListItems', $scope.toDoListItems);
$state.go('myBookingDetails');
};
And then inside of your new view (where the controller and scope are getting refreshed as Jacob pointed out)
$scope.toDoListItems = $localstorage.getObject('toDoListItems');
You'll just need to add the $localstorage service to you services (detailed in link below). For more info on using localstorage with Ionic, visit: http://learn.ionicframework.com/formulas/localstorage/