multiple - Condiciones múltiples de AngularJS clase ng con operador OR

ng if multiple conditions angular 6

Question

Intento descubrir la buena sintaxis para agregar clases según los valores angulares. Quiero activar una clase con respecto a 2 condiciones (una en los cambios de usuario en vivo y otra en la carga de datos) con un operador OR.

Aquí está la línea:

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

Probé algunos códigos diferentes como este:

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

Sin ningún éxito. ¿Puede alguien ayudarme a encontrar la buena sintaxis?

Answer 1

El HTML seguirá siendo el mismo.

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

Pero el orden en que las clases están presentes en su archivo CSS importará

La clase fa-star se aplicará cuando fav===myfav.id true o fav===myfav.id devuelva true.

Por lo tanto, si después de hacer clic una vez, supongamos que fav===myfav.id devuelve true y continúa devolviendo true, incluso al hacer clic nuevamente, la clase fa-star se aplicará siempre desde ese momento.

Si por defecto el favorite es falso, entonces fa-star-o se aplicará cuando la plantilla se cargue por primera vez, pero después del primer clic, cuando el favorite se establezca en verdadero, se eliminará. Luego, en el segundo clic, cuando el favorite se establece en falso otra vez, fa-star-o se aplicará, pero en este caso, la clase fa-star también se aplicará como fa===myfav.id condición fa===myfav.id siendo verdadera ( Suponiendo que ese sea el caso).

Por lo tanto, deberá priorizar qué clase debe aplicarse cuando se encuentre presente en el elemento, ya que puede surgir un caso cuando ambas clases pueden estar presentes al mismo tiempo en el elemento. Por ejemplo, si la clase fa-star-o tiene mayor prioridad, entonces colóquela debajo de fa-star en su CSS, como por ejemplo

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

Consulte la demostración de trabajo en http://plnkr.co/edit/Dh59KUU41uWpIkHIaYrO?p=preview

Answer 2

Prueba esto.

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

No hace falta los soportes.

Answer 3

Puedes usar expresión con ng-class

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

Answer 4

Una vez que tenga que agregar algo de lógica detrás ng-class , siempre es mejor seguir usando el controlador para hacerlo. Puede hacerlo de dos formas: sintaxis JSON (igual que en su HTML, solo más legible) o obviamente JavaScript.

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

Buena declaración IF antigua (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'';
    }
};