When displaying a list of users, I need to emphasize a specific row that corresponds to a user's current rank. However, I am facing an issue with ng-class as it does not appear to override the Foundation background-color for that particular row even when the condition is met. Here is how the row is structured:
<tr ng-repeat="user in displayUsers" ng-class="{'userSelectedBackground': user.rank == regularRank}">
I have verified that user.rank == regularRank returns true for the row I wish to highlight. The developer tools indicate that my userSelectedBackground class is indeed being applied, but I cannot pinpoint where it is being overridden. Even using the !important tag has not yielded any success:
.userSelectedBackground {
background-color: #4C4CFF !important;
}