I'm a beginner in AngularJS and I'm testing my skills by creating a small game.
Here's the table structure I have:
<table class="board">
<h1>Table</h1>
<input type="number" ng-model="val"><button ng-click="ctrl.foo(val)">PRESS</button>
<tr ng-repeat="tr in ctrl.arr">
<td ng-repeat="td in ctrl.arr" ng-click="ctrl.getIndex(tr, td)">{{ctrl.sign[$parent.$index][$index]}}</td>
</tr>
</table>
Below is the snippet of code used to mark the cell you click on:
this.foo = function(size){
this.arr = [];
for(var i = 0; i < size; i++){
this.arr.push(i);
}
}
this.getIndex = function(tr, td){
this.sign = 'X';
console.log(tr, td);
}
I am facing an issue where clicking on any cell only marks the first cell. Can anyone help me understand what mistake I might be making?
If possible, please check out the example here