Javascript 如何在AngularJS中更改二维数组的属性？

所以我有一个动态表，我需要跟踪它的几个属性。我使用angularJS来实现这一点，并使用一个2D对象数组来跟踪表中的元素

我的代码如下所示：

$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';
}

$scope.table=[]；
$scope.generateTable=函数（）{
变量表=[]，[]；
对于（变量i=0；i<$scope.height；i++）{
$scope.table[i]=[]
对于（变量j=0；j<$scope.width；j++）{
$scope.table[i]。推送({
显示：“X”，
活着的：错
});
}
}
}
$scope.changeProp=函数（x，y）{
$scope.table[x][y]。活动=！$scope.table[x][y]。活动；
$scope.table[x][y]。活动？$scope.table[x][y]。显示='O'：$scope.table[x][y]。显示='x'；
}

但每当我尝试运行changeProp（）函数时，它都会说“无法读取未定义的属性”。数组中的元素本应存在，并在前端正确显示，为什么我不能用语法arr[][]更改函数中的元素

编辑：进一步检查后，问题似乎在于宽度未正确传递给changeProp。以下是前端代码：

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

{{y.display}

我已经解决了这个问题

我需要初始化一个变量到ng repeat的索引

例如：

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

{{y.display}

我已经解决了这个问题

我需要初始化一个变量到ng repeat的索引

例如：

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

{{y.display}

您以错误的方式传递了父索引

将$parent.index编辑为$parent.$index

{{y.display}

您以错误的方式传递了父索引

将$parent.index编辑为$parent.$index

{{y.display}

请按如下方式尝试：

$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';
}

$scope.table=[{}，{}]；
$scope.generateTable=函数（）{
变量表=[{}，{}]；
对于（变量i=0；i<$scope.height；i++）{
$scope.table[i]={}；
对于（变量j=0；j<$scope.width；j++）{
$scope.table[i]。推送({
显示：“X”，
活着的：错
});
}
}
}
$scope.changeProp=函数（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'；
}

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

{{y.display}

请按如下方式尝试：

$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';
}

$scope.table=[{}，{}]；
$scope.generateTable=函数（）{
变量表=[{}，{}]；
对于（变量i=0；i<$scope.height；i++）{
$scope.table[i]={}；
对于（变量j=0；j<$scope.width；j++）{
$scope.table[i]。推送({
显示：“X”，
活着的：错
});
}
}
}
$scope.changeProp=函数（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'；
}

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

{{y.display}

您何时调用

生成表

？您确定当时定义了

width

和

height

并且>0吗？您确定作为参数传递给changeProp调用的x和y不大于或等于$scope.height、$scope.width吗？编辑：等等，我实际上没有得到width的值。我将添加ng重复代码。@Ajv2324在浏览器控制台中调试。console.log非常有用的最佳时机何时调用

generateTable

？您确定当时定义了

width

和

height

并且>0吗？您确定作为参数传递给changeProp调用的x和y不大于或等于$scope.height、$scope.width吗？编辑：等等，我实际上没有得到width的值。我将添加ng重复代码。@Ajv2324在浏览器控制台中调试。当console.log非常有用时，您不必使用

ng init=“outer=$index”

来访问父级的索引。您可以直接使用$parent.$index。您不必使用

ng init=“outer=$index”

来访问父级的索引。您可以直接使用$parent.$index进行此操作。