Conditinal ng-class style適用於所有div

我有一張顯示在模式上的患者的卡號列表。如果卡被設置爲默認卡，那麼它應該有一個灰色的背景 - 這是基於對象的值爲true。Conditinal ng-class style適用於所有div

<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重複檢索的對象，然後申請一個表格單元格內的div上的ng-class，以確定是否應用了樣式。奇怪的是，我在div內的跨度上做了同樣的事情，它會按我的預期做出反應，但實際的div不會 - 爲什麼？

下面是該行爲的屏幕截圖。

P.S.當我點擊一個單獨的div時，除了我單擊的div之外，灰色背景會從其他所有其他div中刪除。在上面看到的四個對象中，只有其中一個具有真值，這是最後一張牌。

enter image description here

來源

2014-11-21 Katana24

的價值是什麼obj.PreferredAccount？ – 2014-11-21 14:48:41

@SantiagoRebella它的一個布爾值 – Katana24 2014-11-21 15:18:33

考慮到你正在檢查它的falsey是否包含'undefined'和'null'和'''''，'0'，'NaN'和'false'）。嘗試縮小你的比較。 – 2014-11-21 15:20:31

我看不出你如何選擇付款方式，但你可以在演示是這樣做以下。

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>

來源

2014-11-21 14:48:43 sylwester

Conditinal ng-class style適用於所有div

回答

相關問題