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

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>

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

        };