Update Array-Modell mit einem Klick auf ng-Repeat-Elemente

Question

Ich habe ein zweidimensionales Array von Cell-Objekten, dieses Array ist in meinem HTML durch einige ng-repeat <td> Elemente, Ich möchte meine Zellen aktualisieren, wenn ein <td> Klicken Sie auf. Ich weiß nicht, wie ich meine <td> an die entsprechenden Zellen in meinem Array binden kann.
Das ist, was ich versuchte, tut es mir irgendwelche Fehler gibt, wird das Array in dem HTML-Code angezeigt, aber die ng-Klick Ereignis nicht funktioniert:

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

Answer 1

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>

Ich habe sonst einen Text in das TD sie haben keine Breite, so dass ich nicht auf sie klicken.

x und y sind keine Indizes, sie sind die Objekte. So ist y ein Array von Zellen und x ist eine Instanz von Zelle. Also benutzt du sie direkt im Ausdruck und die Magie passiert.

Answer 2

Ich denke, Ihr Problem ist in Ihrem ngModel und ngClick -Parameter. Versuchen Sie sie auf diese Weise zu verwenden:

<tr ng-repeat = "y in grid"> 
    <td ng-repeat = "x in y" ng-model = "x" ng-click = "x.tryPlay(game)"></td> 
</tr> 

Wenn ich richtig verstehe, was Sie zu tun versuchen. Das sollte funktionieren. Grundsätzlich, wenn Sie für y im Raster wiederholen. Y ist an die verschiedenen Arrays gebunden, die Zeilen repräsentieren. Wenn Sie für x in y innerhalb dieses Repeaters verwenden, wird x an die Zellenobjekte in den Arrays gebunden. Sie sollten in der Lage sein, die Funktionen der Zellobjekte nur mit x zu verwenden.