单击 ng-repeat 元素更新数组模型

Question

我有一个 Cell 对象的二维数组，这个数组在我的 html 中由一些 ng-repeat <td> 元素表示，我想更新我的单击 <td> 时的单元格 。我不知道如何将我的 <td> 绑定到数组中的相应单元格。
这是我尝试过的方法，它没有给我任何错误，数组显示在 html 但 ng-click 事件不起作用：

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

我认为您的问题出在您的 ngModel 和 ngClick 参数中。尝试以这种方式使用它们：

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

如果我理解正确的话，你想做什么。这应该工作。基本上当你在网格中重复 y 时。 Y 绑定到代表行的不同数组。当您在此中继器内使用 for x in y 时，x 将绑定到数组内的单元格对象。您应该能够通过使用 x.

来使用单元格对象函数

Answer 2

    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>

我在 TD 中添加了文本，否则它们没有宽度，所以我无法点击它们。

x 和 y 不是索引，它们是对象。所以 y 是一组单元格，x 是单元格的一个实例。所以你直接在表达式中使用它们，奇迹就会发生。

单击 ng-repeat 元素更新数组模型

Update array model with click on ng-repeat elements

arrays

angularjs

angularjs-ng-repeat

angular-ngmodel

angularjs-ng-click