Saltar al contenido

AngularJS ngClass condicional

Solución:

Tu primer intento fue casi correcto, debería funcionar sin las comillas.

{test: obj.value1 == 'someothervalue'}

Aquí hay un plnkr.

La directiva ngClass funcionará con cualquier expresión que evalúe la verdad o la falsedad, un poco similar a las expresiones de Javascript pero con algunas diferencias, puede leer sobre esto aquí. Si su condicional es demasiado complejo, puede usar una función que devuelva verdadero o falso, como lo hizo en su tercer intento.

Solo para complementar: también puede usar operadores lógicos para formar expresiones lógicas como

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

Usando ng-class dentro de ng-repeat

<table>
    <tbody>
            <tr ng-repeat="task in todos"
                ng-class="{'warning': task.status == 'Hold' , 'success': task.status == 'Completed',
              'active': task.status == 'Started', 'danger': task.status == 'Pending' } ">
                <td>{{$index + 1}}</td>
                <td>{{task.name}}</td>
                <td>{{task.date|date:'yyyy-MM-dd'}}</td>
                <td>{{task.status}}</td>
            </tr>
    </tbody>
</table>

Para cada estado en task.status se usa una clase diferente para la fila.

JS angular proporcionar esta funcionalidad en Directiva de clase ng. En el que puede poner condición y también asignar clase condicional. Puede lograrlo de dos formas diferentes.

Tipo 1

<div ng-class="{0:'one', 1:'two',2:'three'}[status]"></div>

En esta clase de código se aplicará según el valor de estado valor

si estado el valor es 0 luego aplica clase uno

si estado el valor es 1 luego aplica clase dos

si estado el valor es 2 luego aplica clase Tres


Tipo 2

<div ng-class="{1:'test_yes', 0:'test_no'}[status]"></div>

En que clase se aplicará por valor de estado

si estado el valor es 1 o verdadero entonces agregará clase test_yes

si estado el valor es 0 o falso entonces agregará clase test_no

¡Haz clic para puntuar esta entrada!
(Votos: 0 Promedio: 0)



Utiliza Nuestro Buscador

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *