Question

我在视图中有一个表单，应该更新数组的“颜色”属性。此数组colors有5个对象，每个对象用于设置另一个View的元素的颜色（因此使用localStorage的选项，因为我不能使用任何访问服务器，如$ http）。

表单视图（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>

从BoardController.js中摘录（应该将更新存储在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);
    }
}
/*function that applies the style in the elements of the view main.html
  It needs to use $scope.status[$index] since Array indexes
  are the same as the status variable (not shown in this code), which 
  defines the status of each element
*/
$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"
    }
}

在main.html中，使用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>

正确存储数据，因为它显示下面localStorage的图像（请注意第一条记录已被表格更新为“灰色”）：

但是，我无法使用localStorage更新数组，因此更改了View main.html的颜色。有什么问题？

编辑1：

我尝试更改更新功能，如下所示：

$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);
    // for (var i = 0; i < newColors.length; i++) {
    //     $scope.colors.push(newColors);
    //     console.log(newColors);
    // }

}

我评论了循环，现在两个数组在控制台中具有相同的值。但我还不能更新......可能是$scope.style函数中的问题？

编辑2：

JSFiddle

编辑3

问题：如果我执行另一个结构，每个View都有自己的Controller，以及一个服务来获取和设置它们之间的所有数据，该怎么办？这可行吗？

Answer 1

更新功能逻辑错误。实际上，当用户点击＆＃34;更新＆＃34;按钮，应使用新颜色更新（或创建）localStorage数据。但localStorage.getItem和for loop不属于更新操作！

因此，出于此需求的目的，有效的代码只在localStorage.getItem函数之外写for loop和$scope.update，如下所示：

$scope.update = function () {
    localStorage.setItem( 'colors', angular.toJson( $scope.colors, '[]' ) ); 
};

var newColors = angular.fromJson( localStorage.getItem( 'colors' ) );
for (var i = 0; i < newColors.length; i++) {
    $scope.colors[i] = newColors[i];
}

AngularJS - 带有LocalStorage的Json不会更新Array

1 个答案: