条件ng-class样式适用于所有div

Question

我有一个显示在模态上的患者的卡号列表。如果将卡设置为默认卡，则它应具有灰色背景 - 这是基于对象的值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以确定是否应用了样式。奇怪的是，我在div内的跨度上做同样的事情，它会像我预期的那样做出反应，但实际的div却没有 - 为什么会这样？

以下是该行为的屏幕截图。

P.S。当我点击一个单独的div时，除了我点击的div之外，其他所有灰色背景都会消失。在上面看到的四个对象中，只有一个对象的值为true，这是最后一张卡。

Answer 1

我无法看到您如何选择付款方式，但您可以在下面的演示中执行此操作。

var app = angular.module('app', []);

app.controller('homeCtrl', function($scope) {


  $scope.paymentAndShipping = [

    {
      ElectronicPaymentAccountType: "a",
      CreditCardNumber: "155652",
      ExpirationDate: "01/01/2014",
      ElectronicPaymentAccountID: 1
    }, {
      ElectronicPaymentAccountType: "b",
      CreditCardNumber: "155652",
      ExpirationDate: "01/11/2014",
      ElectronicPaymentAccountID: 2
    }, {
      ElectronicPaymentAccountType: "c",
      CreditCardNumber: "1545652",
      ExpirationDate: "21/01/2414",
      ElectronicPaymentAccountID: 3
    }, {
      ElectronicPaymentAccountType: "d",
      CreditCardNumber: "1554652",
      ExpirationDate: "31/01/2024",
      ElectronicPaymentAccountID: 4
    }

  ];

  $scope.PreferredAccount = $scope.paymentAndShipping[0];

  $scope.setDefaultPaymentMethod = function(index) {

    $scope.PreferredAccount = $scope.paymentAndShipping[index];


  }

});

.chosencard {
        background-color: yellow;
    }
td {
border:solid 1px grey
}

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>

<div ng-app="app">
  <div ng-controller="homeCtrl">

    <table>
      <tr>
        <td ng-repeat="obj in paymentAndShipping">
          <div ng-click="setDefaultPaymentMethod($index)" ng-class="{'chosencard' :PreferredAccount==obj }">
            <span ng-show="obj.PreferredAccount" class="glyphicon glyphicon-ok"></span>
            <p>{{obj.ElectronicPaymentAccountType}} {{obj.CreditCardNumber}}</p>
            <p>Exp: {{obj.ExpirationDate}}</p>
          </div>
        </td>
      </tr>
    </table>

<h3>PreferredAccount :</h3> {{PreferredAccount | json }}
  </div>
</div>