使单个按钮在由 ng 重复创建的一组按钮中处于活动状态

Question

我正在研究一个使用 ng-repeat 指令显示表格的指令。表格中的每个单元格可能包含一个按钮，具体取决于数据。这是模板的相关代码段。

<tbody>
    <tr ng-repeat="row in data.rows">
        <td>{{ row.rowName }}</td>
        <td ng-repeat="cell in row.cells">
            <button id="button-{{ row.id }}-{{ cell.id }}"
                    class="btn btn-primary"
                    ng-show="cell.isActive"
                    ng-click="onClick(row.id, cell.id, $event)">Select</button>
        </td>
    </tr>
</tbody>

在我有的控制器中

$scope.onClick = function (rowId, cellId, event) {
    $scope.selectedRowId = rowId;
    $scope.selectedCellId = cellId;
    $scope.selectedButtonId = event.target.id;
};

目标是使用户单击表中的按钮时，该按钮将变为活动状态。当用户单击另一个按钮时，它将变为活动状态，使先前处于活动状态的按钮处于非活动状态。此功能将用于驱动页面其他部分显示的内容。

我已经尝试了一些方法，但我认为最有棱角的做事方式是使用按钮中的ng-class根据单击的按钮来应用活动和非活动类。为此，我为它们分配所有唯一 ID，并根据事件跟踪单击了哪个按钮。

问题是我无法弄清楚如何使ng-class工作。有没有办法获取我所在的当前按钮的 id，或者我首先完全错误了。

谢谢。

Answer 1

在你的按钮代码中设置html ng-class属性：

ng-class="active : selectedRowId = row.id & selectedCellId = cell.id"