使用表單更新對象數組-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"
    }
  }