expresión angular ng-clase if-else

Estoy usando angularjs ng-class de la siguiente manera:

y me preguntaba si puedo usar la expresión if-else, ¿puedo hacer algo similar a esto?

 

lo que significa que cada vez que se call.State diferente de la first o la second classC uso classC y no especifica cada valor.

¡Gracias!

Utilice instrucciones if-then en línea anidadas ( operadores ternarios )

 

por ejemplo :

 
...

Y asegúrate de que tus colegas lo puedan leer 🙂

podrías probar usando una función como esa:

 

Luego ponga su lógica en la función misma:

  $scope.whatClassIsIt= function(someValue){ if(someValue=="first") return "ClassA" else if(someValue=="second") return "ClassB"; else return "ClassC"; } 

Hice un violín con un ejemplo: http://jsfiddle.net/DotDotDot/nMk6M/

Tuve una situación en la que necesitaba dos afirmaciones “si” que pudieran ser verdad y un “else” o predeterminadas si ninguna de ellas fuera cierta, no estoy seguro de si esto mejora la respuesta de Jossef, pero me pareció más clara:

 ng-class="{'class-one' : value.one , 'class-two' : value.two}" class="else-class" 

Donde value.one y value.two son verdaderos, toman precedencia sobre .else-class

Claramente ! Podemos hacer una función para devolver un nombre de clase CSS con el siguiente ejemplo completo. enter image description here

CSS

  

JS

  

Y entonces

  

AngularJS ng-class if example

  • {{icolor}}


Other way using : ng-class="{'class1' : expression1, 'class2' : expression2,'class3':expression2,...}"

  • {{icolor}}

Puede consultar la página de códigos completos en ng-class si ejemplo

Las soluciones anteriores no me funcionaron para las clases con imágenes de fondo de alguna manera. Lo que hice fue crear una clase predeterminada (la que necesitas en else) y establecer class = ‘defaultClass’ y luego la ng-class = “{class1: abc, class2: xyz}”

  {{booking.bookingStatus}}  

PD: las clases que están en condición deben anular la clase predeterminada, es decir, marcarse como! Importante

Una solución para mí es manipular una variable de modelo solo para alternar clase ng:

Por ejemplo, quiero alternar la clase según el estado de mi lista:

1) Siempre que mi lista esté vacía, actualizo mi modelo:

 $scope.extract = function(removeItemId) { $scope.list= jQuery.grep($scope.list, function(item){return item.id != removeItemId}); if (!$scope.list.length) { $scope.liststate = "empty"; } } 

2) Cuando mi lista no está vacía, establezco otro estado

 $scope.extract = function(item) { $scope.list.push(item); $scope.liststate = "notempty"; } 

3) Cuando mi lista no se toca, quiero dar otra clase (aquí es donde se inicia la página):

 $scope.liststate = "init"; 

3) Uso este modelo adicional en mi clase ng:

 ng-class="{'bg-empty': liststate == 'empty', 'bg-notempty': liststate == 'notempty', 'bg-init': liststate = 'init'}" 

Esta es la mejor y más confiable manera de hacer esto. Aquí hay un ejemplo simple y luego puede desarrollar su lógica personalizada:

 //In .ts public showUploadButton:boolean = false; if(some logic) { //your logic showUploadButton = true; } //In template  

Puedes probar este método:

 

ng-class="{test: obj.value1 == 'someothervalue' || obj.value2 == 'somethingelse'}


ng-class="{test: obj.value1 == 'someothervalue' || obj.value2 == 'somethingelse'}

Puede obtener detalles completos desde aquí .