I am attempting to update a list in the home.html file and then display the updated list in myOrders.html using ionic and angularjs.
The issue I am facing is that whenever I add a new item to the array, it replaces all the previous items with the new one.
For example:
If I push 'one' -> the array becomes [{'name':'one'}]
If I push 'two' -> the array becomes [{'name':'two'},{'name':'two'}] // should be [{'name':'one'},{'name':'two'}]
If I push 'three' -> the array becomes [{'name':'three'}, {'name':'three'}, {'name':'three'}] // should be [{'name':'one'},{'name':'two'},{'name':'three'}]
Below are the relevant sections of my code.
home.html (Add to list)
<ion-view title="Home">
<ion-content ng-controller="homeCtrl">
<form ng-submit="submitForm(product)" class="list">
<input ng-model="product.name" type="text">
<input type="submit" value="Search" class="button">
</form>
</ion-content>
</ion-view>
myOrders.html (Display list)
<ion-view title="My Orders">
<ion-content ng-controller="myOrdersCtrl">
{{ product }}
</ion-content>
</ion-view>
controllers.js
angular.module('app.controllers', [])
...
.controller('homeCtrl', function($scope, $state, formData) {
$scope.product = {};
$scope.submitForm = function(product) {
if (product.name) {
formData.updateForm(product);
$state.go('menu.myOrders');
} else {
alert("Please fill out some information for the user");
}
};
})
.controller('myOrdersCtrl', function($scope, formData) {
$scope.product = formData.getForm();
})
services.js
angular.module('app.services', [])
.service('formData', [function(){
return {
form: [],
getForm: function() {
return this.form;
},
updateForm: function(item) {
this.form.push(item);
}
}
}]);