如何使行在单击按钮时改变颜色并在再次单击时返回原始颜色

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);

        };

Answer 1

这里的问题是你有一个值列表，但只有一个布尔值代表所有这些值。tableRowTrueOrFalse应该是布尔值数组而不是布尔值。然后你应该用默认值填充数组false。$scope.tableRowTrueOrFalse = Array(availableFields.length).fill(false);在你的 html 中，它会是这样的：<table>&nbsp; &nbsp; &nbsp; <tbody ng-repeat="field in availableFields">&nbsp; &nbsp; &nbsp; &nbsp; <tr&nbsp; ng-class="{'orderTypeTableRowSelected':tableRowTrueOrFalse[$index]}">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <td style="padding:3px;">{{field.name}}</td>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <td style="padding:3px;">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <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>&nbsp; &nbsp; &nbsp; &nbsp; <button type="button" class="btn btn-warning"><i class="fas fa-check"></i>&nbsp;Default&nbsp;&nbsp;&nbsp;</button>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </td>&nbsp; &nbsp; </tr>&nbsp; &nbsp; </tbody></table>然后在你的函数中，$scope.orderTypeTableRowSelected = function (field, index) {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; $scope.tableRowTrueOrFalse[index] = !$scope.tableRowTrueOrFalse[index];&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; console.log(field);&nbsp; &nbsp; &nbsp; &nbsp; };