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并在更新功能内部更新颜色with colors2 $ scope.colors = $ scope.colors2

这是摆弄它如何运作的小提琴：

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

此处还有保存按钮工作的小提琴：

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

Answer 2

如果您没有与服务器一起工作。您实际上不需要表单/ 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"
    }
  }

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

2 个答案: