Update array model with click on ng-repeat elements

Question

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

Walfrat · Accepted Answer · 2016-05-04 14:57:11Z

    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.

Thanks, i don't know why I thought x and y was indexes, when you read y in grid it's obvious that they are objects.

Hugo St-Arnaud · Accepted Answer · 2016-05-04 14:57:02Z

1

I think your issue is in your ngModel and ngClick parameter. Try to use them this way :

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

If I understand correctly what you are trying to do. This should work. Basically when you repeat for y in grid. Y is bound to the different arrays that reprensent rows. When you use for x in y inside this repeater, x becomes bound to the cell objects inside the arrays. You should be able to use the cell objects functions just by using x.

answered May 4, 2016 at 14:57

Hugo St-Arnaud

1695 bronze badges

1 Comment

aurelienC Over a year ago

Yes, i misunderstood y and x for indexes on the moment, they are just reference to objects.

Collectives™ on Stack Overflow

Update array model with click on ng-repeat elements

2 Answers 2

1 Comment

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related