How to change the property of a 2D array in AngularJS?

Question

So I've got a dynamic table that I need to keep track of several properties of. I'm using angularJS to do this and a 2D array of objects to track the elements of the table.

My code looks like this:

$scope.table = [];
$scope.generateTable = function(){
    var table = [[], []];
    for (var i = 0; i < $scope.height; i++) {
        $scope.table[i] = []
        for (var j = 0; j < $scope.width; j++) {
            $scope.table[i].push({
                display: 'X',
                alive: false
            });
        }
    }
}

$scope.changeProp = function(x, y){
    $scope.table[x][y].alive = !$scope.table[x][y].alive;
    $scope.table[x][y].alive ? $scope.table[x][y].display = 'O' : $scope.table[x][y].display = 'X';
}

But it says 'cannot read property of undefined' whenever I try to run the changeProp() function. The elements exist in the array as they should and display properly on the front end, why can't I change the elements in the function with the syntax arr[][]?

EDIT: Upon further review, it appears the problem lies with width not being passed to changeProp properly. Here is the front end code:

<tr ng-repeat="x in table">
    <td ng-repeat="y in x track by $index" align="center" ng-click="changeProp($parent.index, $index)">
        {{ y.display }}
    </td>
</tr>

When do you call generateTable ? Are you sure width and height are defined and > 0 at that time ? — known-as-bmf
– known-as-bmf, Commented May 3, 2017 at 16:37
Are you sure that x and y passed as parameters to changeProp call are not greater than or equal to $scope.height, $scope.width ? — Haris
– Haris, Commented May 3, 2017 at 16:41
EDIT: Wait, I am in fact not getting a value for width. I will add my ng-repeat code. — Ajv2324
– Ajv2324, Commented May 3, 2017 at 16:45
@Ajv2324 debug in the browser console. Perfect time when console.log is really helpful — Anil Namde
– Anil Namde, Commented May 3, 2017 at 16:48

Prateek Gupta · Accepted Answer · 2017-05-03 16:56:05Z

1

You have passed parent index in wrong way.

Edit $parent.index to $parent.$index.

<tr ng-repeat="x in table">
    <td ng-repeat="y in x track by $index" align="center" ng-click="changeProp($parent.$index, $index)">
        {{ y.display }}
    </td>
</tr>

answered May 3, 2017 at 16:56

Prateek Gupta

1,1791 gold badge11 silver badges26 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Jeet · Accepted Answer · 2017-05-03 17:12:09Z

Pleas try as like below:

$scope.table = [{},{}];
$scope.generateTable = function(){
    var table = [{}, {}];
    for (var i = 0; i < $scope.height; i++) {
        $scope.table[i] = {};
        for (var j = 0; j < $scope.width; j++) {
            $scope.table[i].push({
                display: 'X',
                alive: false
            });
        }
    }
}

$scope.changeProp = function(x, y){
    x =parseInt(x);
    y= parseInt(y);
    $scope.table[x][y]['alive'] = !$scope.table[x][y]['alive'];
    $scope.table[x][y]['alive'] ? $scope.table[x][y]['display'] = 'O' : $scope.table[x][y]['display'] = 'X';
}

IN UI:

<tr ng-repeat="x in table">
    <td ng-repeat="y in x track by $index" align="center" ng-click="changeProp($index==0 ? 0 :$index--, $index)">
        {{ y.display }}
    </td>
</tr>

Ajv2324 · Accepted Answer · 2017-05-03 16:55:34Z

0

I've solved the problem.

I needed to init a variable to the index of the ng-repeat.

Example:

<tr ng-repeat="x in table" ng-init="outer = $index">
      <td ng-repeat="y in x track by $index" ng-init="inner = $index" align="center" ng-click="changeProp(outer, inner)">
              {{ y.display }}
      </td>
</tr>

answered May 3, 2017 at 16:55

Ajv2324

5228 silver badges25 bronze badges

1 Comment

Prateek Gupta Over a year ago

You don't have to use ng-init="outer =$index" for accessing index of parent . You can directly use $parent.$index for this.

Collectives™ on Stack Overflow

How to change the property of a 2D array in AngularJS?

3 Answers 3

Comments

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related