異なるスタイルのng-repeatアクティブクラス

Question

ng-repeatでオファーのリストを作成しています。それぞれのオファーステータスに応じて、色が異なる必要があります。アクティブな場合は、それぞれのステータスも異なる必要があります。能動的なロジックはうまくいきますが、今起こっていることは、すべてが真であるようにレンダリングされることです。したがって、それらはすべて同じ色です。あなたがこれを行うための他のアイデアを持っている場合は、気軽に。

それはレンダリング後にこれは、私が調べたときに私が見たものである：ここでは

ng-class="{'offer card-active-false card row text-left': currentOfferId === offer.id, 'offer card card-false row text-left': currentOfferId !== offer.id}" class="offer card card-true row text-left" 

は、私がHTMLに持っているものです。

<div ng-repeat="offer in $parent.offersList track by $index"> 
    <button ng-click="$ctrl.setCurrentOffer(offer)"> 
    <div ng-if="" ng-class="{'offer card-active-{{offer.status}} card row text-left': currentOfferId === offer.id, 'offer card card-{{offer.status}} row text-left': currentOfferId !== offer.id}"> 
    //then I have my divs 
    </div> 
    </button> 
</div> 

CCS：

   .card-true { 
        background-color: #00FF44; 
       } 

       .card-false { 
        background-color: #C4C4CC; 
       } 

       .card- { 
        background-color: yellow; 
       } 

       .card-active-true { 
        background-color: #fff!important; 
        border-color: #00FF44; 
       } 

       .card-active-false { 
        background-color: #fff!important; 
        border-color: gray; 
       } 

       .card-active- { 
        background-color: #fff!important; 
        border-color: yellow; 
       } 

感謝！

Answer 1

常に正常なclass属性に存在することが必要なクラスを置きます。

必要なクラスを簡素化し、それらを分離して、ロジックを複雑にする必要はありません。私の提案は、オフかもしれないが、それはこのようなものになります。

• card-status-...からoffer.status
• card-activeによって駆動 - あなたが次に `currentOfferId === offer.id」

による可能性が駆動を簡単にロジックをngClassに入れると、クラス名を表す文字列、クラス名をキーとするオブジェクト、クラスを含めるかどうかを示すブール値をメンバーとして持つ配列を指定できます。これと同じように：

<div class="offer card row text-left" 
    ng-class="[ 
     'card-status-' + offer.status, 
     {'card-active' : currentOfferId === offer.id} 
    ]"> 

今、あなたのCSSであなたがセレクタを組み合わせることにより、これらのクラスを設定することができます。

.card { 
    background-color: yellow; 
} 

.card-status-true { 
    background-color: #00FF44; 
} 

.card-status-false { 
    background-color: #C4C4CC; 
} 

.card.card-active { 
    background-color: #fff !important; 
    border-color: yellow; 
} 

.card.card-active.card-status-true { 
    background-color: #fff !important; 
    border-color: #00FF44; 
} 

.card.card-active.card-status-false { 
    background-color: #fff !important; 
    border-color: gray; 
} 

Answer 2

私の解決策は、明らかにng-classの内部で正しくバインドされていない複雑なロジックを削除することです。これは混乱するだけで時間がかかりません。

注：thisの代わりに$scopeの変数を使用しました。共有するJSFiddleのGISTを使用してください。コードをビルドしようとしました。色の要件が不明です。コードが解決するかどうか確認してくださいあなたの問題。

JSFiddle Demo

CODE：

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

app.controller('MyController', function MyController($scope) { 
    $scope.offersList = [{id:1, status: false}, {id:2, status: false}, {id:3, status: false}, {id:4, status: false}]; 
    $scope.currentOfferId = 0; 
    $scope.setCurrentOffer=function(index){ 
    $scope.currentOfferId = $scope.offersList[index].id; 
    $scope.offersList[index].status = !$scope.offersList[index].status; 
    } 
    $scope.filterClass = function(offer){ 
    var bool = offer.status ? 'true' : 'false'; 
    if($scope.currentOfferId === offer.id){ 
     return 'offer card-active-'+bool; 
     }else{ 
     return 'offer card card-'+bool; 
     } 
    } 
});  

Answer 3

をそれはあなたがどのような状況に適用するどのクラス完全には明らかではありません。 ng-classをそれぞれ別の条件で配列に渡す必要がありますが、これはおそらく問題の根源でした。 また、物事が少しすっきり見えますこれ（角v.1.1.4 +は三項演算子のサポートが導入されました）このために三元を使用することができます。

<div ng-class="[offer.id ===currentOfferId ? 'card-active-true' : 'card-active-false', 
offer.status ? 'card-active-true' : 'card-false' ]" 
class="offer card row text-left" >