I need to update the "color" property of an Array in a form within a View. The Array named colors consists of 5 objects that define the color of elements in another View. Since I cannot access the server, I plan to use localStorage for this task.
The form view (settings.html)
<form name="colorform" class="row col-md-offset-1" ng-submit="update(key)">
<div class="col-md-6">
<div class="form-group">
<label>Color A (Tiles)</label>
<input name="main" ng-model="colors[0].color" class="form-control">
</div>
<div class="form-group">
<label>Color B (Blocked Tiles)</label>
<input name="locker" ng-model="colors[1].color" class="form-control">
</div>
<div class="form-group">
<label>Color C (Path)</label>
<input name="path" ng-model="colors[2].color" class="form-control">
</div>
<div class="form-group">
<label>Color D (Start Point)</label>
<input name="path" ng-model="colors[3].color" class="form-control">
</div>
<div class="form-group">
<label>Color E (End Point)</label>
<input name="path" ng-model="colors[4].color" class="form-control">
</div>
<button type="submit" class="btn btn-primary">
Update
</button>
<a href="#/" class="btn btn-primary">Back</a>
<hr>
</div>
</form>
Excerpt from BoardController.js (for updating colors and localStorage):
//Array to be updated
$scope.colors = [
{name: "main", color: "white"},
{name: "locker", color: "black"},
{name: "path", color: "yellow"},
{name: "start", color: "green"},
{name: "end", color: "blue"},
];
//localStorage
$scope.update = function (key) {
localStorage.setItem( 'colors', angular.toJson( $scope.colors, '[]' ) );
console.log(JSON);
var newColors = angular.fromJson( localStorage.getItem( 'colors' ) );
for (var i = 0; i < newColors.length; i++) {
$scope.colors == $scope.colors;
$scope.colors = newColors[i];
console.log($scope.colors);
}
}
$scope.style = function ($index) {
return {
"height" : tileHeight + 'px',
"width" : tileWidth + 'px',
"border" : "1px solid #CCC",
"background-color": $scope.colors[$scope.status[$index]].color,
"float": "left"
}
}
In main.html, using the ng-style:
<div ng-repeat="tile in getNumber(tiles) track by $index"
ng-click="changeToggle($index)" ng-init="initToggle($index)"
ng-model="status[$index]" ng-style="style($index)"></div>
</div>
The data is being stored correctly in localStorage as shown below: https://i.sstatic.net/4QUKi.jpg
However, I'm facing issues with updating the array with the localStorage information to change the colors of View main.html. What am I missing?
EDIT 1:
I made modifications to the update function as follows:
$scope.update = function (key) {
localStorage.setItem( 'colors', angular.toJson( $scope.colors, [] ) );
var newColors = angular.fromJson( localStorage.getItem( 'colors' ) );
console.log(newColors);
$scope.colors = newColors.slice(0);
console.log($scope.colors);
}
I have commented out the loop, and now both Arrays show the same values in the console. But the update still doesn't work... Could it be an issue in the $scope.style function?
EDIT 2:
EDIT 3
Question: What if I restructure it so each View has its Controller and a Service to transfer data between them? Is that a feasible solution?