我有一个显示在模式上的患者的卡号列表。如果卡被设置为默认卡,那么它应该有一个灰色的背景 - 这是基于对象的值为true。
<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>
重要部分:
ng-class="{'chosencard' : obj.PreferredAccount }"
相关的CSS:
.chosencard {
background-color: @gray-lighter;
}
在这里你可以看到我迭代了数组并使用ng-repeat检索对象,然后在表格单元格内的div上应用ng-class,以确定是否应用了样式。
以下是该行为的屏幕截图。
PS:当我点击一个单独的div时,除了我单击的div之外,灰色背景会从其他所有其他div中删除。在上面看到的四个对象中,只有其中一个具有真值,这是最后一张牌。
相似问题