In my Angular application, I am facing an issue with data manipulation. The data is pulled from a model on app load and then modified in a controller's function. However, I only want this additional data to be used for that specific page without saving it back into the main model.
The structure of my model:
'use strict';
(function () {
var PotsMod = function ($log, _) {
return {
pots: [
{"comp" : "comp1"},
{"comp" : "comp2"}
],
getPots: function () {
return this.pots;
},
};
};
angular
.module('picksApp.models')
.factory('PotsMod', PotsMod);
})();
And here is my controller:
(function () {
function AdmCtrl($log, $routeParams, PotsMod) {
var vm = this;
vm.pots = PotsMod.getPots();
vm.init = function() {
// modify pot.competition values
_.forEach(vm.pots, function(pot) {
pot.comp = "test";
});
console.log(PotsMod.getPots());
}
vm.init();
}
angular
.module('picksApp.controllers')
.controller('AdmCtrl', AdmCtrl);
})();
My issue arises when trying to manage the data within the controller. Despite my attempts at debugging, the output seems contradictory and confusing.
Your assistance would be greatly appreciated in resolving this dilemma. Thank you.