For a patient, I have a modal displaying a list of card numbers. If the card is set as the default card, it should have a grey background, based on a true value for the object.
<td ng-repeat="obj in paymentAndShipping">
<div ng-click="setDefaultPaymentMethod(obj.ElectronicPaymentAccountType, obj.ElectronicPaymentAccountID)" ng-class="{'chosencard' : obj.PreferredAccount }">
<span ng-show="obj.PreferredAccount" class="glyphicon glyphicon-ok"></span>
<p>{{obj.ElectronicPaymentAccountType}} {{trimCardNum(obj.CreditCardNumber)}}</p>
<p>Exp: {{obj.ExpirationDate}}</p>
</div>
</td>
Key point:
ng-class="{'chosencard' : obj.PreferredAccount }"
CSS snippet:
.chosencard {
background-color: @gray-lighter;
}
The code iterates over an array, retrieves objects using ng-repeat, and applies ng-class to the div inside the table cell to determine styling. It's peculiar that applying the same logic to the span inside the div works as expected, while the div itself does not - why?
A screenshot illustrating this behavior can be seen below.
Note: When clicking on an individual div, the grey background disappears from all others except the clicked one. Out of the four objects shown above, only one has a true value, which is the last card.