징계 ng 클래스 스타일이 모든 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 반복을 사용하여 객체를 검색하고 다음을 적용 할 수 있습니다 ng-class를 사용하여 스타일이 적용되었는지 확인하십시오. 이상한 점은 div 내부의 스팬에서 똑같은 일을하고 기대 한대로 반응하지만 실제 div는 그렇지 않다는 것입니다. 왜 그런가요?

다음은 스크린 샷입니다.

P. 개별 div를 클릭하면 회색 배경이 내가 클릭 한 div를 제외한 다른 모든 divppear에서 사라집니다. 그리고 위의 네 가지 객체 중 오직 하나만이 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>