Je crée une liste d'offres avec ng-repeat. En fonction du statut de chaque offre, elles doivent avoir des couleurs différentes et, lorsqu'elles sont actives, elles doivent également avoir un statut spécifique différent. La logique active fonctionne bien, mais ce qui se passe maintenant, c'est qu'ils sont tous rendus comme vrais, donc ils sont tous de la même couleur. N'hésitez pas si vous avez d'autres idées pour faire cela.

C'est ce que je vois quand j'inspecte, après le rendu:

 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"

Voici ce que j'ai sur 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;
                }

Merci!

1
Gabriela Moura 31 août 2017 à 23:23

2 réponses

Meilleure réponse

Placez les classes qui doivent toujours être présentes dans un attribut class normal.

Ensuite, simplifiez les classes dont vous avez besoin et séparez-les afin de ne pas trop compliquer la logique. Mes suggestions sont peut-être erronées, mais elles devraient ressembler à ceci:

  • card-status-... - piloté par offer.status
  • card-active - piloté par `currentOfferId === offer.id '

Ensuite, vous pouvez facilement mettre la logique dans ngClass, ce qui vous permet de spécifier un tableau dont les membres peuvent être des chaînes représentant des noms de classe ou des objets dont les clés sont des noms de classe et dont les valeurs booléennes indiquent si la classe doit être incluse. Ainsi:

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

Maintenant, dans votre CSS, vous pouvez configurer ces classes en combinant des sélecteurs:

.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;
}
2
JC Ford 31 août 2017 à 20:55

Il n'est pas tout à fait clair quelles classes vous souhaitez appliquer à quelle situation. Vous devez remettre à ng-class un tableau avec chaque condition distincte, c'était probablement la racine de votre problème. Vous pouvez également utiliser ternaire pour cela (angular v.1.1.4 + support introduit pour l'opérateur ternaire) qui rend les choses un peu plus nettes:

<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" >
0
Doug E Fresh 31 août 2017 à 21:02