Tenho um formulário em uma View que deveria atualizar a propriedade "color" de um Array. Este Array colors
possui 5 objetos, cada um servindo para definir a cor de um elemento de uma outra View (por isso a opção de usar localStorage, já que não posso usar nenhum acesso ao servidor, como $http).
A view do form (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>
Trecho do BoardController.js (que deveria guardar a atualização no localStorage e atualizar o Array colors em seguida):
//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"
}
}
E em main.html, a utilização do 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>
Os dados estão sendo armazenados corretamente, como mostra a imagem do localStorage abaixo (reparem que o primeiro registro foi atualizado para "gray" pelo form):
Porém, não consigo fazer a localStorage atualizar o array, e consequentemente alterar as cores da View main.html. O que está errado?