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

【问题标题】：Conditional ng-class style applies to all divs条件 ng-class 样式适用于所有 div
【发布时间】：2014-11-21 14:23:13
【问题描述】：

我有一个显示在模式上的患者卡号列表。如果卡片被设置为默认卡片，那么它应该有灰色背景 - 这是基于对象的 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 内的 span 上做了同样的事情，它的反应与我预期的一样，但实际的 div 没有 - 为什么会这样？

这是该行为的屏幕截图。

附：当我单击一个单独的 div 时，灰色背景从所有其他 div 中消失，除了我单击的 div。在您在上面看到的四个对象中，只有一个的值为 true，这是最后一张卡片。

【问题讨论】：

obj.PreferredAccount 的值是多少？
@SantiagoRebella 它是一个布尔值
考虑到您正在检查它是否是虚假的，因此包括undefined 和null 和""，和0，和NaN，和false）。尝试缩小您的比较范围。

标签： css angularjs

【解决方案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>

【讨论】：