不同風格的ng-repeat活動類

我正在用ng-repeat創建商品列表。根據每個報價狀態，它們應該具有不同的顏色，並且在激活時它應該具有不同的特定狀態。主動邏輯運行良好，但現在發生的事情是，它們都呈現爲真實，因此它們都是相同的顏色。如果您有任何其他想法，請隨時聯繫。不同風格的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; 
       }

的感謝！

來源

2017-08-31 Gabriela Moura

是'NG-if'需要的？ –

沒有。我刪除了，但沒有改變任何東西。 –

認沽類。

然後簡化您需要的類並將它們分開，以便您不必過度複雜化邏輯。我的建議可能會關閉，但它應該是這個樣子：

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; 
}

來源

2017-08-31 20:55:10

天才！ <3 非常感謝！ –

這是我的解決方案，刪除複雜的邏輯，這顯然不是在ng-class內部正確綁定，它只會混淆，它不值得的時間。

注：我已經使用$scope變量而不是this，請用我分享的jsfiddle的要點，並嘗試建立你的代碼，我不能確定的顏色要求，請覈對後，如果代碼做出決議告訴我你的問題。

JSFiddle Demo

CODE：總是需要存在於正常class屬性

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; 
     } 
    } 
});

來源

2017-08-31 20:54:35

這不是完全清楚你想應用到形勢哪些類。您需要爲每個單獨的條件賦予一個ng類的數組，這可能是您的問題的根源。您還可以使用三元這個（角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" >

來源

2017-08-31 21:02:16

不同風格的ng-repeat活動類

回答

相關問題