爲什麼總是在AngularJS中挑選第一個TD細胞

Question

我是AngularJS的新手，我正在嘗試做一個小遊戲。

我有一個表：

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

這是此表來標記你單擊該單元格的代碼：

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); 
    } 

有人能解釋爲什麼點擊任一單元格，它總是隻標記第一個單元格？

錯誤在哪裏？

Here is the example

Answer 1

的錯誤是，你是如ctrl.push可變分配ctrl.sign但把它當作一個二維數組，當您使用的HTML代碼中引用它。

您在第一列中看到'x'的原因可以通過一個小例子來顯示（儘管我不確定爲什麼，有人可能會解釋它...我假設它與JavaScript的方式有關處理變量）

var test = 'x'; 
console.log(test[0][0]); //shows 'x' 
console.log(test[0][1]); // shows undefined 
console.log(test[1][1]); // type error 

因此，在你的代碼中，我們可以通過創建一個二維數組，並使用現有插入「X」的方法解決它。我們將調整FOO創建/填充二維數組，並推動將做插入：

this.foo = function(size) { 

    this.arr = []; 
    for (var i = 0; i < size; i++) { 
     this.arr.push(i); 
     //fill our 2d array 
     this.sign.push([]); 
     for (var g = 0; g < size; g++) { 
      this.sign[i].push(''); 
     } 
    } 
} 
this.push = function(parent, index) { 
    this.sign[parent][index] = 'X'; 
    console.log(parent, index) 
} 

在這一點上，你也可以換出改編爲你的NG-重複的跡象。請看工作jsfiddle here.