AngularJS ng-class expresión if-else

257

Con AngularJSestoy usando ng-classla siguiente manera:

<div class="bigIcon" data-ng-click="PickUp()" 
ng-class="{first:'classA', second:'classB', third:'classC', fourth:'classC'}[call.State]"/>

Me pregunto si puedo usar la if-elseexpresión para hacer algo similar a esto:

<div class="bigIcon" data-ng-click="PickUp()" 
ng-class="{first:'classA', second:'classB', else:'classC'}[call.State]"/>

Entonces, ¿cuándo call.Statedifiere firsto secondusa classCy evita especificar cada valor?

angularjs ng-class Dor Cohen
fuente

Respuestas:

523

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

<div ng-class=" ... ? 'class-1' : ( ... ? 'class-2' : 'class-3')">

por ejemplo :

<div ng-class="apt.name.length >= 15 ? 'col-md-12' : (apt.name.length >= 10 ? 'col-md-6' : 'col-md-4')">
    ...
</div>

Y asegúrese de que sus colegas lo puedan leer :)

Jossef Harush
fuente
2
¿Qué pasa si necesito agregar dos clases?
mircobabini
2
Lo siento, quiero decir "una clase si esto Y otra clase si eso". Dos clases, dos condiciones diferentes.
mircobabini
17
@mircobabini, ng-class="{'class1': ##condition1## , 'class2': ##condition2## }"como puede ver en la pregunta anterior
Jossef Harush
2
Esto no es algo que quiera ver en la vista. Demasiada lógica para la vista.
AturSams
19
@ Zehelvion, tendría que estar en desacuerdo. Esta es la lógica de la vista. No querrá dictar qué clase de columna utilizará dentro de su controlador o un servicio ... aquí es donde debería estar.
Nick
108

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

<div ng-class='whatClassIsIt(call.State)'>

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/

Punto punto punto
fuente
66
Esta es una solución mucho mejor que los operadores ternarios anidados
David dice Reinstate Monica el
2
Quiéralo. Esto mantiene el html aún más limpio que un simple condicional de clase ng.
mrgnw
17
El problema con este enfoque es que ahora está informando al controlador de las clases CSS. No es un buen enfoque. Tener una variable establecida en el controlador y luego determinar qué clase usar en el HTML a partir de la variable es la mejor solución.
VtoCorleone
1
Esto es solo una pista sobre cómo puede hacerlo, este problema fue lo suficientemente simple como para tratarlo con un operador ternario, pero cuando necesita más lógica no desea hacerlo directamente en HTML, una de las soluciones más rápidas es , como lo hice, para usar una función en su controlador para eso (si no desea que el controlador conozca el CSS, también puede ver y establecer una variable de alcance y usar una condición en el HTML basada en ese valor ) Pero, si tienes un poco más de lógica o muchas repeticiones, pon esto en una directiva, debería ser más limpio. El ejemplo fue principalmente sobre NO poner lógica en el HTML
DotDotDot
1
mejor que los operadores ternarios si necesita agregar una condición para más de 2 o 3 clases diferentes, separe el html con la lógica :)
Tho Vo
61

Tuve una situación en la que necesitaba dos declaraciones 'si' que pudieran hacerse realidad y una 'otra' o predeterminada si ninguna de las dos fuera cierta, no estoy seguro de si esto es una mejora en la respuesta de Jossef, pero me pareció más claro: 

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

Donde value.one y value.two son verdaderos, tienen prioridad sobre la clase .else

joel.bowen
fuente
13

Claramente ! Podemos hacer una función para devolver un nombre de clase CSS con el siguiente ejemplo completo. ingrese la descripción de la imagen aquí

CSS

<style>
    .Red {
        color: Red;
    }
    .Yellow {
        color: Yellow;
    }
      .Blue {
        color: Blue;
    }
      .Green {
        color: Green;
    }
    .Gray {
        color: Gray;
    }
     .b{
         font-weight: bold;
    }
</style>

JS

<script>
    angular.module('myapp', [])
            .controller('ExampleController', ['$scope', function ($scope) {
                $scope.MyColors = ['It is Red', 'It is Yellow', 'It is Blue', 'It is Green', 'It is Gray'];
                $scope.getClass = function (strValue) {
                    if (strValue == ("It is Red"))
                        return "Red";
                    else if (strValue == ("It is Yellow"))
                        return "Yellow";
                    else if (strValue == ("It is Blue"))
                        return "Blue";
                    else if (strValue == ("It is Green"))
                        return "Green";
                    else if (strValue == ("It is Gray"))
                        return "Gray";
                }
        }]);
</script>

Y entonces 

<body ng-app="myapp" ng-controller="ExampleController">

<h2>AngularJS ng-class if example</h2>
<ul >
    <li ng-repeat="icolor in MyColors" >
        <p ng-class="[getClass(icolor), 'b']">{{icolor}}</p>
    </li>
</ul>
<hr/>
<p>Other way using : ng-class="{'class1' : expression1, 'class2' : expression2,'class3':expression2,...}"</p>
<ul>
    <li ng-repeat="icolor in MyColors">
        <p ng-class="{'Red':icolor=='It is Red','Yellow':icolor=='It is Yellow','Blue':icolor=='It is Blue','Green':icolor=='It is Green','Gray':icolor=='It is Gray'}" class="b">{{icolor}}</p>
    </li>
</ul>

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

Lewis Hai
fuente
3

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 necesita en otra cosa) y establecer class = 'defaultClass' y luego ng-class = "{class1: abc, class2: xyz}"

<span class="booking_warning" ng-class="{ process_success: booking.bookingStatus == 'BOOKING_COMPLETED' || booking.bookingStatus == 'BOOKING_PROCESSED', booking_info: booking.bookingStatus == 'INSTANT_BOOKING_REQUEST_RECEIVED' || booking.bookingStatus == 'BOOKING_PENDING'}"> <strong>{{booking.bookingStatus}}</strong> </span>

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

Kazim Homayee
fuente
1

Esta es la mejor y más confiable forma 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
<button [class]="showUploadButton ? 'btn btn-default': 'btn btn-info'">Upload</button>
Avtandil Kavrelishvili
fuente
0

Una solución alternativa mía es manipular una variable de modelo solo para el cambio de clase ng:

Por ejemplo, quiero alternar la clase de acuerdo con el estado de mi lista:

1) Cada vez 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, configuro otro estado

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

3) Cuando mi lista nunca 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'}"
Bahadir Tasdemir
fuente
0

Úselo de esta manera:

    <div [ngClass]="{cssClass A: condition 1, cssClass B: condition 2, cssClass C: condition 3}">...</div>
BLACKRIGAN
fuente
-3

Puedes probar este método:

</p><br /><br />
<p>ng-class="{test: obj.value1 == 'someothervalue' || obj.value2 == 'somethingelse'}<br /><br /><br />

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

Puede obtener detalles completos desde aquí .

Ehtesham Shami
fuente