使用表单更新对象数组-AngularJS

Question

我有一个带有3个输入的表单，用户将为颜色插入十六进制值。

我需要接收这些值并更新Array对象的一个​​属性。 此更新仅用于前端目的，没有Json访问或服务器正在运行。

Form.html

<form name="colorform" class="row col-md-offset-1" ng-submit="update(name, data)">
    <div class="col-md-6">
        <div class="form-group">
            <label>Color A</label>
            <input name="main" ng-model="colors.main" class="form-control">    
        </div>
        <div class="form-group">
            <label>Color B</label>
            <input name="locker" ng-model="colors.locker" class="form-control">    
        </div>
        <div class="form-group">
            <label>Color C</label>
            <input name="path" ng-model="colors.path" class="form-control">    
        </div>

        <button type="submit" class="btn btn-primary">
            Save
        </button>
         <a href="#/" class="btn btn-primary">Back</a>
        <hr>
    </div>
</form>

对象数组：

$scope.colors = [
        {name: "main", color: "white"},
        {name: "locker", color: "black"},
        {name: "path", color: "yellow"}
    ];

和更新功能：

$scope.update = function(name, data) {
   for (var i = 0; i < $scope.colors.length; i++) {
       if ($scope.colors[i].name == name) {
           $scope.colors[i].color = data;
           break;
       }
   }
 }

我打算更新color属性。 目标是反映在html元素中，该元素在Controller上使用此功能：

$scope.style = function ($index) {       
        return {
            "height" : "15px",
            "width" : "15px",
            "border" : "1px solid #CCC",
            "background-color": $scope.colors[1].color,
            "float": "left"
        }
    }

在显示的HTML上：

<div ng-style="boardStyle" class="board">
  <div ng-repeat="tile in getNumber(tiles) track by $index" 
    ng-style="style($index)"></div>
</div>

但是...什么都没发生。 我在哪里做错了？

Answer 1

我认为我们可以改善您的代码，首先要解决的问题是您的输入模型指向错误的地方。 让我们为您的数据创建一个好的模型：

$scope.colors = {
    main: {
      color: "white"
    },
    locker: {
      color: "black"
    },
    path: {
      color: "yellow"
    }
  };

之后，让我们修复getNumber函数以返回数组中对象的键：

$scope.getNumber = function(tiles){
  return Object.keys($scope.colors);
}

最后修复样式函数，使其采用键而不是$ index，这在我看来非常糟糕，因此：

$scope.style = function (key) {       
        return {
            "height" : "15px",
            "width" : "15px",
            "border" : "1px solid #CCC",
            "background-color": $scope.colors[key].color,
            "float": "left"
        }
    }

最后，我们需要对html进行一些小的更改以调整代码中的一些内容，例如指向正确模型的输入字段：

<input name="main" ng-model="colors.main.color" class="form-control">
<input name="locker" ng-model="colors.locker.color" class="form-control">
<input name="path" ng-model="colors.path.color" class="form-control">

并重复div：

<div ng-repeat="tile in getNumber(tiles) track by $index" ng-style="style(tile)"></div>

如果您确实确定要使用保存按钮的功能来触发更改，则可以只复制颜色对象，并将其命名为$ scope.colors2-将输入中的ng-model更改为指向colors2，而在更新功能内部，只需使用colors2 $更新颜色scope.colors = $ scope.colors2

这是用来显示其工作方式的小提琴：

https://jsfiddle.net/pegla/j392Lvdp/5/

另外，这里还有保存按钮起作用的小提琴：

https://jsfiddle.net/pegla/j392Lvdp/6/

Answer 2

如果服务器没有任何工作。 您实际上并不需要form / submit（）来更新属性。 您正在使用ng-model访问对象数组，该对象数组会自动更新属性。

   <form name="colorform" class="row col-md-offset-1" ng-submit="update()">
    <div class="col-md-6">
        <div class="form-group">
            <label>Color A</label>
            <input name="main" ng-model="colors[0].color" class="form-control">    
        </div>
        <div class="form-group">
            <label>Color B</label>
            <input name="locker" ng-model="colors[1].color" class="form-control">    
        </div>
        <div class="form-group">
            <label>Color C</label>
            <input name="path" ng-model="colors[2].color" class="form-control">    
        </div>

        <button type="submit" class="btn btn-primary">
            Save
        </button>
         <a href="#/" class="btn btn-primary">Back</a>
        <hr>
    </div>
</form>

<div>
  <div ng-repeat="tile in colors track by $index" ng-style="style($index)"></div>
</div>

这就是您需要的对象数组：

  $scope.colors = [
        {name: "main", color: "white"},
        {name: "locker", color: "black"},
        {name: "path", color: "yellow"}
    ];

您的更新功能是否要：

  $scope.update = function() {
    alert("Colors have been updated!");
  }

和您的样式功能：

  $scope.style = function(key) {
    return {
      "height": "15px",
      "width": "15px",
      "border": "1px solid #CCC",
      "background-color": $scope.colors[key].color,
      "float": "left"
    }
  }