I am facing an issue with a table that includes the ng-class directive in the following format:
<tbody>
<tr style="cursor: pointer" class="clickable-row" ng-repeat="firm in device.firmwares" ng-class="{'success': firm.vulnScore<= 4,'warning' :5<= firm.vulnScore,'danger' : 8<=firm.vulnScore}">
<td>{{firm.fileName}}</td>
<td>{{firm.extracted}}</td>
<td>{{firm.vulnScore}}</td>
<td>{{firm.date}}</td>
</tr>
</tbody>
The purpose of this directive is to color the rows based on the vulnScore value, which is working well. However, I also need to be able to select the rows. I was able to achieve this by adding the following script:
$('#firm_table').on('click', '.clickable-row', function(event) {
$(this).addClass('bg-primary').siblings().removeClass('bg-primary');
});
While this script successfully selects rows, it only changes the text color due to the existing class styles. What I actually need is to remove the existing class (success, warning, or danger) when a row is selected, and then apply it back when another row is selected. This would be simple if there was only one class, but I'm unsure how to track and reapply the original class.
Currently, this is the output when a row is selected:
What I actually want to achieve looks like this:
If anyone can provide guidance on how to achieve this, I would greatly appreciate it!