使用窗体更新对象数组 - 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" 
    } 
    }