web-dev-qa-db-fra.com

AngularJS ng-class multiple conditions with OR operator

J'essaie de trouver la bonne syntaxe pour ajouter des classes en fonction de angular. Je veux activer une classe concernant 2 conditions (une sur les changements d'utilisateurs en direct et une sur le chargement des données) avec a = OR.

Voici la ligne:

 <a href="" ng-click="addFavorite(myfav.id);favorite=!favorite">
    <i class="fa orange" ng-class="{'fa-star': (favorite || (fav==myfav.id)), 'fa-star-o': !favorite}"></i>
 </a>

J'ai essayé différents codes comme celui-ci:

 ng-class="{'fa-star': favorite, 'fa-star': (fav==myfav.id), 'fa-star-o': !favorite}"

sans aucun succès. Quelqu'un peut-il m'aider à trouver la bonne syntaxe?

angularjsconditionalng-class
20
user1713964

Essaye ça.

<a href="" ng-click="addFavorite(myfav.id);favorite=!favorite">
 <i class="fa orange" ng-class="{'fa-star': favorite || fav==myfav.id, 'fa-star-o': !favorite}"></i>

Pas besoin de supports.

32
Abhilash Augustine

Une fois que vous devez ajouter un peu de logique derrière ng-class il est toujours préférable de s'en tenir à l'utilisation du contrôleur pour ce faire. Vous pouvez le faire de deux manières: la syntaxe JSON (la même que dans votre HTML, juste plus lisible) ou bien sûr JavaScript.

Syntaxe HTML (JSON)

HTML 

<i ng-class="getFavClassIcon(myFav.id)"></i>

JS 

$scope.getFavClassIcon= function (favId) {
    return {
        'fa-star-o' : !$scope.favorite,
        'fa-star'   : $scope.favorite || $scope.fav === favId
    };
};

Bon vieux instruction IF (JavaScript)

HTML 

<i ng-class="getFavClassIcon(myFav.id)"></i>

JS 

$scope.getFavClassIcon= function (favId) {
    if (!$scope.favorite) {
        return 'fa-star-o';
    } else if ($scope.favorite) { // obviously you can use OR operator here
        return 'fa-star';
    } else if ($scope.fav === favId) {
        return 'fa-star';
    }
};
9
SDekov

Le HTML restera le même

<a href="" ng-click="addFavorite(myfav.id);favorite=!favorite">
    <i ng-class="{'fa-star-o':!favorite,'fa-star':favorite||fav===myfav.id}"></i>
</a>

Mais l'ordre dans lequel les classes sont présentes dans votre fichier CSS aura de l'importance

Le fa-star la classe s'appliquera soit lorsque favorite est vraie ou fav===myfav.id renvoie vrai.

Par conséquent, si après avoir cliqué une fois, supposez que fav===myfav.id renvoie true et continue de renvoyer true, même lorsque vous cliquez à nouveau, puis la classe fa-star sera toujours appliqué à partir de ce moment.

Si par défaut favorite est faux, alors fa-star-o sera appliqué lors du premier chargement du modèle, mais après le premier clic, lorsque favorite aura la valeur true, il sera supprimé. Ensuite, au deuxième clic, lorsque favorite est à nouveau défini sur false, fa-star-o il sera appliqué mais dans ce cas, fa-star la classe sera également appliquée en tant que fa===myfav.id la condition retournerait toujours vraie (en supposant que ce soit le cas).

Par conséquent, vous devrez prioriser la classe qui doit être appliquée avec certitude lorsqu'elle est présente sur l'élément, car un cas peut se produire lorsque les deux classes peuvent être présentes en même temps sur l'élément. Par exemple, si fa-star-o la classe a une priorité plus élevée, puis placez-la sous le fa-star dans votre CSS, comme par exemple

.fa-star {
  border: 1px solid #F00;
}
.fa-star-o {
  border: 1px solid #000;
}

Voir la démonstration de travail sur http://plnkr.co/edit/Dh59KUU41uWpIkHIaYrO?p=preview

4
Prayag Verma

Vous pouvez utiliser l'expression avec ng-class

  <i class="fa orange" ng-class="favorite || fav == myfav.id ? 'fav' : 'no-fav'"></i>
2
allenhwkim