javascript - 使用 ng-click 和 ng-repeat 使表格单元格处于事件状态

Question

问题:我有一张 table 和一个可点击的 <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
        };
    }
})