как заставить строку менять цвет при каждом нажатии кнопки и go вернуться к исходному цвету при повторном нажатии

Question

Когда кнопка нажата, я хочу изменить цвет, и когда та же кнопка нажата, я хочу go вернуться к исходному цвету. Прямо сейчас при нажатии кнопки все строки меняют цвет.

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>

angular

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