2

I have a simple 4x4 table and a 4x1 table. The 4x4 table a table of white squares. The 4x1 table is a list of 4 colors. Ideally, I'd like to click on an element in the 4x1 table (a color) and click on an element in the 4x4 table and change the background color of that particular element, not the entire 4x4 table. So, if I click on the color blue, and then block (2,2), then block (2,2) will change to blue. Right now, this is what I have:

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

So here, I know I must add some identifier for the colors to capture them, but I am not certain how at the moment.

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

And here, I have a table where I am hoping to use getColor to set the color value, initially blank or white, and changeColor to change that.

At this very moment, getColor looks like:

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

And changeColor looks like:

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

Of course, this does not work for a variety of reasons, but I would like to know how to get the simple functionality that I am hoping for.

Improve this question
2
  • not really clear how this needs to work but if click is supposed to change things then you need to pass argument(s) to that function and probably same for getColor() Commented Sep 25, 2016 at 23:28
  • I am trying to build something like Paint Shop, if you are familiar with that Commented Sep 26, 2016 at 0:30

2 Answers 2

Reset to default
2

I'd approach it like this...

  1. On clicking a colour cell, set a temporary nextColour scope property
  2. On clicking a grid cell, set its background colour to the nextColour value. You can keep track of each cell's colour by using a two-dimensional array.

pre { display: block; }
td {
  width: 20px;
  height: 20px;
  border: 1px solid black;
}
<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>

Note that you have to use $parent when setting a value within ng-repeat in order to not just set it within the ng-repeat directive scope.

Improve this answer
Sign up to request clarification or add additional context in comments.

Comments

1

You could have an array of objects that represent each cell and store the color there. 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>
Improve this answer

4 Comments

You're going to run into a scoping issue setting activeColour within the ng-repeat
Also, you have a typo in "cell in rows". Should be row
fixed typo. And yeah it would be better to use controller as syntax to avoid the scope issue.
The problem is that you're only setting activeColor inside the ng-repeat directive scope so it won't actually be available to the second table. You could use a controller function to set the value or use "controller as" as you pointed out

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.