I'm currently facing an issue with controlling the $scope.$watch function in my code. It seems to be causing an infinite loop during iteration.
$scope.$watch('dashboards', function(newVal, oldVal) {
if (newVal !== oldVal) {
$scope.dashboard = $localStorage.sample;
$scope.dashboards['1'].id = $scope.dashboards[1].id + 1;
$localStorage.sample = $scope.dashboards[1];
console.log('newval: '+$scope.dashboards['1'].id);
} else {
$scope.$storage = $localStorage;
$localStorage.sample = $scope.dashboards[1];
$scope.dashboard = $localStorage.sample;
$scope.dashboards['1'].id = $scope.dashboards[1].id.length + 1;
$localStorage.sample = $scope.dashboards[1];
console.log('oldval: '+$scope.dashboards['1'].id);
}
}, true);
Below is the content of my scope.dashboards:
$scope.dashboards = {
'1' : {
id : '1',
widgets : [{
code : "bla1.html",
col : 0,
row : 0,
sizeY : 1,
sizeX : 2,
title : "Bla1"
}, {
code : "bla2.html",
col : 2,
row : 0,
sizeY : 2,
sizeX : 2,
title : "Bla2"
}, {
code : "bla3.html",
col : 0,
row : 4,
sizeY : 1.5,
sizeX : 2,
title : "Bla3"
}
}
I am aiming to update the localStorage with a new ID every time there is a change in widget position within $scope.dashboards. This will help in preserving the widget positions even when the browser is closed or refreshed. Any suggestions on how to approach this issue would be greatly appreciated. Thank you!