Change the color of button in particular tr of html table after submitting the form - html

Question

Following code consists of html part.
I need to change the color of button of a particular row on click of it after all values in table body are validated
This code changes the color of button on click of it before validation.
<tbody>
<tr data-ng-repeat="val in finalData[0]" ">
<td><button type="button"
ng-click="storeTicketKey(val.TicketKey,val.clicked = !val.clicked)" class="btn btn-primary"
ng-class="{'btn-danger': !val.clicked, 'btn-success': val.clicked }"
data-toggle="modal" data-target="#myModal">{{val.TicketKey}}</button></td>
<td>{{val.Status}}</td>
<td>{{val.AssignedGroup}}</td>
<td>{{val.AssignedTo}}</td>
<td>{{val.L1}}</td>
<td>{{val.L2}}</td>
<td>{{val.L3}}</td>
<td>{{val.L4}}</td>
<td>{{val.L5}}</td>
<td>{{val.AssignedTo}}</td>
<td>{{val.ResponseSLAStatus}}</td>
<td>{{val.ResolutionSLAStatus}}</td>
<td>{{val.Region}}</td>
<td>{{val.SLABreachReason}}</td>
</tbody>

Answer 1

In the scenario you provided a solution would be removing the ng-class attribute and instead creating a (click)= "checkFields(event)" on the button and in your .ts you can create the function which will check the validity of the fields and change the class of your component.
Your .html:
<td><button type="button" ng-click="storeTicketKey(val.TicketKey,val.clicked = !val.clicked)" class="btn btn-primary" "checkFields(event)" data-toggle="modal" data-target="#myModal">{{val.TicketKey}}</button></td>
Your .ts:
checkFields(event: any){
//Check if the fields are valid, in this case I only check if they exist
if(!val.Status){
return;
}if(!val.AssignedGroup){
return;
}
.. and so on for all the fields you want to test
//If all variables are valid and the function gets to the end
//You change the class of the button
event.target.className = 'btn-success';
}

Answer 2

<tr data-ng-repeat="val in finalData[0] track by $index ">
<td><button type="button"
ng-click="storeTicketKey(val.TicketKey, $index)" class="btn btn-primary" ng-class="{'btn-success': $index=== isActive}"
data-toggle="modal" data-target="#myModal">{{val.TicketKey}}</button></td>
<td>{{val.Status}}</td>
<td>{{val.AssignedGroup}}</td>
<td>{{val.AssignedTo}}</td>
<td>{{val.L1}}</td>
<td>{{val.L2}}</td>
<td>{{val.L3}}</td>
<td>{{val.L4}}</td>
<td>{{val.L5}}</td>
<td>{{val.ResponseSLAStatus}}</td>
<td>{{val.ResolutionSLAStatus}}</td>
<td>{{val.Region}}</td>
<td>{{val.SLABreachReason}}</td>
</tbody>
$scope.valClicked=false;
$scope.isActive = "";
$scope.tempTicket="";
$scope.storeTicketKey = function(ticketKey,str) {
$scope.finalTicketKey=ticketKey;
$scope.tempTicket = str;
// $scope.valClicked=val;
}
$scope.isActiveButton = function(){
$scope.isActive = $scope.tempTicket;
}