html - 每当单击按钮时如何使行更改颜色并在再次单击时返回原始颜色

Question

单击按钮时，我想更改颜色，单击同一按钮时，我想返回原始颜色。现在，当单击按钮时，所有行都会改变颜色。

html

<table>
      <tbody ng-repeat="field in availableFields">
        <tr  ng-class="{'orderTypeTableRowSelected':tableRowTrueOrFalse}">
                <td style="padding:3px;">{{field.name}}</td>
                <td style="padding:3px;">
                <button type="button" ng-click="orderTypeTableRowSelected(field)" class="btn btn-danger" style="margin-left:10px;"><i class="fas fa-check"></i>&nbsp;Required</button>
        <button type="button" class="btn btn-warning"><i class="fas fa-check"></i>&nbsp;Default&nbsp;&nbsp;&nbsp;</button>
                </td>

    </tr>
    </tbody>
</table>

CSS

<style>

    .orderTypeTableRowSelected {
        background-color: #E0F7FA;
    }
</style>

有角度的

        $scope.tableRowTrueOrFalse = false;
        $scope.orderTypeTableRowSelected = function (field) {
            $scope.tableRowTrueOrFalse = !$scope.tableRowTrueOrFalse;
            console.log(field);
        };

标签： htmlcssangularjs

Answer 1

这里的问题是你有一个值列表，但只有一个布尔值代表所有这些值。

tableRowTrueOrFalse应该是一个布尔值数组，而不是一个布尔值。false然后你应该默认填充数组。

$scope.tableRowTrueOrFalse = Array(availableFields.length).fill(false);

在您的 html 中，它将类似于：

<table>
      <tbody ng-repeat="field in availableFields">
        <tr  ng-class="{'orderTypeTableRowSelected':tableRowTrueOrFalse[$index]}">
                <td style="padding:3px;">{{field.name}}</td>
                <td style="padding:3px;">
                <button type="button" ng-click="orderTypeTableRowSelected(field, $index)" class="btn btn-danger" style="margin-left:10px;"><i class="fas fa-check"></i>&nbsp;Required</button>
        <button type="button" class="btn btn-warning"><i class="fas fa-check"></i>&nbsp;Default&nbsp;&nbsp;&nbsp;</button>
                </td>

    </tr>
    </tbody>
</table>

然后在你的函数中，

$scope.orderTypeTableRowSelected = function (field, index) {
            $scope.tableRowTrueOrFalse[index] = !$scope.tableRowTrueOrFalse[index];
            console.log(field);
        };