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"

在由ng-repeat创建的一组按钮中激活一个按钮

1 个答案: