I have a form in a View that should update the "color" property of an Array. This array contains 5 objects, each one serving to set the color of an element of another View (so the option to use localStorage, since I can not use any access to the server, like $ http). >
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 (which should save the update to the localStorage and update the Array colors next):
//Array a ser atualizado
$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);
}
}
/*função que aplica o estilo nos elementos da view main.html
Necessita utilizar $scope.status[$index] pois os índices do Array
são os mesmos da variável status (não exibida neste código), que define
o estado de cada elemento
*/
$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"
}
}
And in main.html, the use of style:
<!-- Através do 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, as shown by the localStorage image below (note that the first record has been updated to "gray" by the form):
However, I can not make the localStorage update the array, and consequently change the colors of View main.html. What's wrong?