I have a two-dimensional array of Cell objects, this array is represented in my html by some ng-repeat <td>
elements, I would like to update my cells when a <td>
get clicked. I don't know how to bind my <td>
to the corresponding cells in my array.
This is what I tried, it doesnt give me any errors, the array is displayed in the html but the ng-click event does not work:
html:
<div ng-app = "game" ng-controller = "gameCtrl" id = "gameLayout">
<div id = "boardLayout">
<table id = "grid">
<tr ng-repeat = "y in grid">
<td ng-repeat = "x in y" ng-model = "grid[y][x]" ng-click = "grid[y][x].tryPlay(game)"></td>
</tr>
</table>
</div>
</div>
Javascript:
Cell.prototype.tryPlay = function(game)
{
console.log("tryPlay call.");
}
// ...
var game = angular.module("game", []);
game.controller("gameCtrl", function($scope, $interval)
{
var grid = [[new Cell(), new Cell(), new Cell(), new Cell(), new Cell()],
[new Cell(), new Cell(), new Cell(), new Cell(), new Cell()],
[new Cell(), new Cell(), new Cell(), new Cell(), new Cell()],
[new Cell(), new Cell(), new Cell(), new Cell(), new Cell()],
[new Cell(), new Cell(), new Cell(), new Cell(), new Cell()]];
var game = new Game(grid);
$scope.game = game;
$scope.grid = game.grid;
});
function Cell(){
return this;
}
Cell.prototype.tryPlay = function(game)
{
console.log("tryPlay call.");
this.value="CLIKED";
}
// ...
var game = angular.module("game", []);
game.controller("gameCtrl", function($scope, $interval)
{
var grid = [[new Cell(), new Cell(), new Cell(), new Cell(), new Cell()],
[new Cell(), new Cell(), new Cell(), new Cell(), new Cell()],
[new Cell(), new Cell(), new Cell(), new Cell(), new Cell()],
[new Cell(), new Cell(), new Cell(), new Cell(), new Cell()],
[new Cell(), new Cell(), new Cell(), new Cell(), new Cell()]];
//var game = new Game(grid);
// $scope.game = game;
$scope.game="";
$scope.grid = grid;
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app = "game" ng-controller = "gameCtrl" id = "gameLayout">
<div id = "boardLayout">
<table id = "grid">
<tr ng-repeat = "y in grid">
<td ng-repeat = "x in y" ng-click = "x.tryPlay(game)">CLICK ME <span style="color:red" ng-bind="x.value"></span></td>
</tr>
</table>
</div>
</div>
I added a text in the TD otherwise they have no width so i can't click on them.
x and y are not indexes, they are the objects. So y is an array of cells and x is one instance of cell. So you use them straight in the expression and the magic happens.