AngularJS ng-classe plusieurs conditions avec OU opérateur

J'essaie de trouver la bonne syntaxe pour ajouter des classes en fonction de valeurs angulaires.
Je veux activer une classe concernant les 2 conditions (un sur live les modifications de l'utilisateur, et un sur le chargement de données) avec l'un OU de l'exploitant.

Ici est 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é des différents codes comme celui-ci :

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

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

Il devrait être {'fa-star': favorite || fav == myfav.id, 'fa-star-o': !favorite}. Voir un exemple similaire dans ce plunkr. J'ai essayé de remplacer ce code avec ng-class="{'has-error': ctrl.submitted && 1 == 1} et il fonctionne.
Parens devrait fonctionner tout aussi bien. Si je change de votre Plunkr code et de les ajouter à votre ET d'expression, tout fonctionne toujours. Je suppose que l'OP a un autre problème avec leur code.
Oui, c'était mon premier code, mais il semble qu'il ne s'applique pas à la classe. J'ai testé la fav == myfav.id à l'extérieur et il retourne "true" comme il se doit.
Oh. Pourrait-il être quelque chose à propos de la logique : si !favorite mais fav==myfav.id le résultat serait à la fois fa-star fa-star-o et la dernière s'applique et visuellement ne pas changer l'icône. Donc je ne suis pas sûr que mon "switch" fonctionne dans ce cas

OriginalL'auteur user1713964 | 2014-06-18

  1. 25

    De l'essayer.

    <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 des parenthèses.

    Cela ne fonctionne pas comme prévu. L'autre condition semble être ignoré lorsqu'un modèle est mis à jour.
    Vouliez-vous dire, lorsque la variable préféré = false et fav == myFav.id? Il en résulte ajouter les deux classes 'fa-star' et 'fa-star-o".
    Le problème est avec l'opérateur OU, pas de la deuxième classe. Lorsque l'une des conditions de changements, il remplace l'autre condition.
    en remplacement , que voulez-vous dire, pourrais-tu élaborer un peu. aussi, si ils peuvent vous dire exactement ce que vous voulez devrait arriver et sa ne se passe pas bien , mal hypothèses que nous avons fait
    Malheureusement, je vais avoir des difficultés à reproduire le problème que j'ai été voir. J'ai peut-être de se rétracter.

    OriginalL'auteur Abhilash P A- Pullelil

  2. 8

    Une fois que vous avez à ajouter une certaine logique derrière ng-class il est toujours préférable de s'en tenir à l'aide de la manette pour le faire. Vous pouvez le faire de deux façons, soit: syntaxe JSON (le même que dans votre code HTML, juste plus lisible) ou évidemment JavaScript.

    HTML (JSON) Syntaxe

    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 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';
    }
};
    L'ancienne s'est le mieux, surtout si plusieurs variables affectent le nom de la classe

    OriginalL'auteur SDekov

  3. 4

    Le code 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 sera question

    La fa-star classe d'appliquer lorsque favorite est vrai ou fav===myfav.id renvoie la valeur true.

    Donc si après avoir cliqué une fois , supposons que fav===myfav.id retourne true et ne cesse de revenir , même lorsque vous cliquez sur nouveau , puis la classe fa-star sera toujours appliqué à partir de là.

    Si par défaut favorite est faux , alors fa-star-o sera appliquée lorsque le modèle est chargé pour la première fois, mais après le premier clic ,lorsque favorite est défini sur true , il sera supprimé. Puis sur la deuxième clic , lorsque favorite est défini à false, encore une fois , fa-star-o elle sera appliquée, mais dans ce cas , fa-star classe sera également appliquée comme fa===myfav.id condition serait encore de retourner true (en Supposant que c'est le cas).

    Par conséquent, vous devez établir l'ordre de priorité les besoins de la classe pour obtenir appliquée pour sûr lorsqu'il est présent sur l'élément de cas peuvent survenir lorsque les deux classes peuvent être présents en même temps sur l'élément. Par exemple, si fa-star-o classe est prioritaire, puis le mettre au-dessous de la fa-star dans votre CSS , comme par exemple

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

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

    OriginalL'auteur Prayag Verma

  4. 2

    Vous pouvez utiliser des expression avec ng-classe

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

    OriginalL'auteur allenhwkim