When the button is pressed, I'd like to change the color. When the same button is pressed again, I want it to revert back to its original color. Currently, when the button is clicked, all rows change color.
Sample Code Snippet:
<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> Required</button>
<button type="button" class="btn btn-warning"><i class="fas fa-check"></i> Default </button>
</td>
</tr>
</tbody>
</table>
CSS styling:
<style>
.orderTypeTableRowSelected {
background-color: #E0F7FA;
}
</style>
AngularJS function:
$scope.tableRowTrueOrFalse = false;
$scope.orderTypeTableRowSelected = function (field) {
$scope.tableRowTrueOrFalse = !$scope.tableRowTrueOrFalse;
console.log(field);
};