如何在AngularJS中使用ng-click元素更改ng样式元素？

Question

我有一个简单的4x4表和一个4x1表。 4x4表白色方块表。 4x1表是4种颜色的列表。理想情况下，我想点击4x1表格中的一个元素（一种颜色），然后点击4x4表格中的一个元素，然后更改该特定元素的背景颜色，而不是整个4x4表格。因此，如果我点击蓝色，然后阻止（2,2），则块（2,2）将变为蓝色。现在，这就是我所拥有的：

<table>
<td ng-style="{'background-color':'blue'}"></td>
<td ng-style="{'background-color':'green'}"></td>
<td ng-style="{'background-color':'orange'}"></td>
<td ng-style="{'background-color':'red'}"></td>
</table>

所以在这里，我知道我必须添加一些颜色的标识符才能捕获它们，但我现在还不确定。

<table>
<tr>
    <td ng-style="getColor()" ng-click="changeColor()"></td>
    <td ng-style="getColor()" ng-click="changeColor()"></td>
    <td ng-style="getColor()" ng-click="changeColor()"></td>
    <td ng-style="getColor()" ng-click="changeColor()"></td>
</tr>
<tr>
    <td ng-style="getColor()" ng-click="changeColor()"></td>
    <td ng-style="getColor()" ng-click="changeColor()"></td>
    <td ng-style="getColor()" ng-click="changeColor()"></td>
    <td ng-style="getColor()" ng-click="changeColor()"></td>
</tr>
<tr>
    <td ng-style="getColor()" ng-click="changeColor()"></td>
    <td ng-style="getColor()" ng-click="changeColor()"></td>
    <td ng-style="getColor()" ng-click="changeColor()"></td>
    <td ng-style="getColor()" ng-click="changeColor()"></td>
</tr>
<tr>
    <td ng-style="getColor()" ng-click="changeColor()"></td>
    <td ng-style="getColor()" ng-click="changeColor()"></td>
    <td ng-style="getColor()" ng-click="changeColor()"></td>
    <td ng-style="getColor()" ng-click="changeColor()"></td>
</tr>
</table>

在这里，我有一个表格，我希望使用getColor来设置颜色值，最初为空白或白色，并使用changeColor来更改颜色值。

此时，getColor看起来像：

$scope.getColor = function(){
    return{
        "background-color":"white"
    }
}

并且changeColor看起来像：

$scope.changeColor = function(){
    return{
        "background-color":"'"+$scope.newColor+"'"
    }
}

当然，这不是出于各种原因，但我想知道如何获得我希望的简单功能。

Answer 1

我这样接近......

1. 单击颜色单元格时，设置临时nextColour范围属性
2. 单击网格单元格时，将其背景颜色设置为nextColour值。您可以使用二维数组跟踪每个单元格的颜色。
＆＃13;
＆＃13;
pre { display: block; }
td {
  width: 20px;
  height: 20px;
  border: 1px solid black;
}
＆＃13;
<main ng-app>
  <table>
    <tr>
      <td ng-repeat="colour in ['blue', 'green', 'orange', 'red'] track by $index"
          ng-style="{'background-color': colour}"
          ng-click="$parent.nextColour = colour">
      </td>
    </tr>
  </table>
  <pre>nextColour = {{nextColour|json}}</pre>
  
  <table>
    <tr ng-repeat="row in [0,1,2,3] track by $index">
      <td ng-repeat="col in [0,1,2,3] track by $index"
          ng-style="{'background-color': colour[row][col]}"
          ng-click="colour[row][col] = nextColour">
      </td>
    </tr>
  </table>
</main>

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular.js"></script>
＆＃13;
＆＃13;
＆＃13;

请注意，在$parent中设置值时，您必须使用ng-repeat才能将其设置在ng-repeat指令范围内。

Answer 2

您可以拥有一个表示每个单元格的对象数组，并将颜色存储在那里。 e.g。

JS

$scope.cells = [
    [{}, {}, {}, {}],
    [{}, {}, {}, {}],
    [{}, {}, {}, {}],
    [{}, {}, {}, {}]
];

$scope.colors = ['purple', 'green', 'yellow', 'red'];

HTML

<table>
    <td ng-repeat="color in colors" ng-style="{'background-color':color}" ng-click="activeColor = color"></td>
</table>

<table>
    <tr ng-repeat="row in cells">
        <td ng-repeat="cell in row" ng-style="{'background-color':cell.color}" ng-click="cell.color = activeColor"></td>
    </tr>
</table>