使用ng-click和ng-repeat制作表格单元格

Question

问题： 我有一张桌子和一张可点击的<td>。我想要发生的是当我点击以下任何一个<td>它会变得活跃但我无法正确行事。

DOM

<table class="table-position">
  <tr ng-repeat="i in [1,2,3]">
    <td ng-repeat="j in [1,2,3]" ng-click="selectPosition(j)" 
     ng-class="{active: selectedPosition == j}"></td>
  </tr>
</table>

指令

$scope.selectPosition = function(position){
  $scope.selectedPosition = position;
}

文字渲染

i1-[j1,j2,j3]
i2-[j1,j2,j3]
i3-[j1,j2,j3]

电流输出：当我点击任意一个ff时，这是当前的输出：<td> [i1，j1]，[i2，j1]，[i3 ，J1]

预期输出 这是我点击中心<td> [i2，j2]

时的预期输出

我已经尝试在selectPosition函数上传递数组和对象但仍无法正常工作。不确定如果我做得对。

如果不清楚，请告诉我。提前谢谢。

Answer 1

<强> DEMO

<table class="table-position" ng-controller="myCtrl">
    <tr ng-repeat="i in [1,2,3]">
        <td ng-repeat="j in [1,2,3]" ng-click="selectPosition($parent.$index, $index)"
            ng-class="{active: (selectedPosition.parent == $parent.$index && selectedPosition.index == $index )}">{{ j }}</td>
    </tr>
</table>

单击td时传递$ index和$ parent。$ index。

var app = angular.module("app", []);

app.controller("myCtrl", function ($scope) {

    $scope.selectPosition = function ($parentIndex, $index) {
        $scope.selectedPosition = {
            parent: $parentIndex,
            index: $index
        };
    }
})

Answer 2

我确定你可以让这个更漂亮，但我的想法是，在你的旧代码中，$ scope.selectedPosition在i的每次迭代中总是相同的，所以自然地每行中的j变为活动状态。 / p>

$scope.selectPosition = function(i, j){
  $scope.selectedPosition = {};
  $scope.selectedPosition.i = i;
  $scope.selectedPosition.j = j;
}

<table class="table-position">
  <tr ng-repeat="i in [1,2,3]">
    <td ng-repeat="j in [1,2,3]" ng-click="selectPosition(j)" 
     ng-class="{active: (selectedPosition.j == j && selectedPosition.i == i)}"></td>
  </tr>
</table>