使用窗體更新對象數組 - AngularJS

Question

我有一個帶有3個輸入的窗體，用戶將爲顏色插入十六進制值。

我需要接收這些值並更新數組的對象的一個​​屬性。此更新僅用於前端目的，不允許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元素，控制器上使用此功能，以反映：

$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); 
} 

，並在年底解決您的風格函數取鑰匙和不是$指數，這是非常不好的在我看來，這樣：

$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-模型指向colors2和您的更新功能中只是更新colors2 $ scope.colors = $ scope.colors2

顏色下面是小提琴展示它是如何工作的：

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

而且，這裏的撥弄保存按鈕的工作：

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

Answer 2

如果你不具有與服務器的任何工作。 你並不需要form/submit（）來更新屬性。 您正在使用ng模型來訪問自動更新屬性的對象數組。

<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" 
    } 
    }