AngularJS ngClass condicional


499

¿Hay alguna forma de hacer una expresión para algo como ng-classser condicional?

Por ejemplo, he intentado lo siguiente:

<span ng-class="{test: 'obj.value1 == \'someothervalue\''}">test</span>

El problema con este código es que no importa lo que obj.value1sea, la prueba de clase siempre se aplica al elemento. Haciendo esto:

<span ng-class="{test: obj.value2}">test</span>

Mientras obj.value2no sea igual a un valor verdadero, la clase no se aplica. Ahora puedo solucionar el problema en el primer ejemplo haciendo esto:

<span ng-class="{test: checkValue1()}">test</span>

Donde la checkValue1función se ve así:

$scope.checkValue1 = function() {
  return $scope.obj.value === 'somevalue';
}

Me pregunto si así es como ng-classse supone que debe funcionar. También estoy creando una directiva personalizada donde me gustaría hacer algo similar a esto. Sin embargo, no puedo encontrar una manera de ver una expresión (y tal vez eso es imposible y la razón por la que funciona así).

Aquí hay un plnkr para mostrar lo que quiero decir.


Eche un vistazo a esta respuesta: stackoverflow.com/questions/14788652/…
Adrian Neatu

43
Las clases con guiones deben citarse:ng-class="'label-success': obj.value1 == 'Ready', 'label-warning': obj.value1 == 'On hold'}"
Brent Washburne

2
Podemos usar más condiciones con ng-class, vea en este blog goo.gl/qfEQZw
virender


"Las clases con guiones necesitan pestañas '' '' '' '"
richard

Respuestas:


596

Su 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 verdadero o falso, un poco similar a las expresiones Javascript pero con algunas diferencias, puede leer 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'}"

2
Gracias, por alguna razón, pensé que debido a que se trataba de una expresión como el valor del objeto, todo tenía que estar entre comillas.
ryanzec

8
ajusta el nombre de la clase de lo 'contrario si deseas agregar más clases o si tu clase tiene guiones o guiones bajos, no funcionará. ng-class="{'test test-2: obj.value1 === 'value'}"
Andrea Turri

66
@Andrea, olvidaste la cita de cierre: ng-class="{'test test-2': obj.value1 === 'value'}"
ErikE

Para Angular2 (que yo estaba tratando de encontrar) atributo de uso (s) como: [class.test]="obj.value1 == 'someotervalue'".
kub1x

Para su información a los lectores, también puede tener paréntesis. ng-class="{danger:!enabled || (type === 'WHEEL' && !isOnline) }
daCoda

227

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.


Ejemplo perfecto con múltiples clases, ¡Gracias!
Sreekanth Karini

112

Angular JS proporciona esta funcionalidad en la directiva ng-class . En el que puede poner condición y también asignar clase condicional. Puede lograr esto de dos maneras diferentes.

Tipo 1

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

En este código de clase se aplica de acuerdo con el valor de estado de valor

si el valor de estado es 0 , aplique la clase uno

si el valor de estado es 1 , aplique la clase dos

si el valor de estado es 2 , aplique la clase tres


Tipo 2

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

En qué clase se aplicará por valor de estado

si el valor de estado es 1 o verdadero , agregará la clase test_yes

si el valor de estado es 0 o falso , agregará la clase test_no


1
¿Cuál es el estado aquí?
CommonSenseCode

El estado es el valor que desea verificar o validar según la clase que se aplicará.
Kaushal Khamar

44
De esta manera, ya que es más flexible y menos loco cuando se trata de valores múltiples
Eduardo La Hoz Miranda

¿Qué hay de usarlo para múltiples clases? Como, <div ng-class = "{0: 'uno', 1: 'dos', 2: 'tres'} [estado], {0: 'uno', 1: 'dos'} [estado1]"> </div>
parth.hirpara

1
¿Podemos usar esto en un caso como: <div ng-class="{'Image' || 'image': 'image-icon', 'Video' || 'video' || 'aVideo' || 'bVideo' : 'video-icon'}[resource.type]"></div>
Chandra Kant Paliwal

80

Veo excelentes ejemplos arriba, pero todos comienzan con llaves (mapa json). Otra opción es devolver un resultado basado en el cálculo. El resultado también puede ser una lista de nombres de clase css (no solo un mapa). Ejemplo:

ng-class="(status=='active') ? 'enabled' : 'disabled'"

o

ng-class="(status=='active') ? ['enabled'] : ['disabled', 'alik']"

Explicación: Si el estado está activo, se enabledusará la clase . De lo contrario, disabledse utilizará la clase .

La lista []se usa para usar múltiples clases (no solo una).


1
Encantador, todos ejemplos increíbles, ¡pero me gustan más los tuyos!
stormec56

48

Hay un método simple que podría usar con el atributo de clase html y la abreviatura si / si no. No hay necesidad de hacerlo tan complejo. Solo usa el siguiente método.

<div class="{{expression == true ? 'class_if_expression_true' : 'class_if_expression_false' }}">Your Content</div>

Happy Coding, Nimantha Perera


2
Este chico lo entiende. Gracias
amigo

36

Le mostraré dos métodos por los cuales puede aplicar dinámicamente ng-class

Paso 1

Mediante el uso de operador ternario

<div ng-class="condition?'class1':'class2'"></div>

Salida

Si su condición es verdadera, se aplicará la clase 1 a su elemento; de lo contrario, se aplicará la clase 2.

Desventaja

Cuando intente cambiar el valor condicional en tiempo de ejecución, la clase de alguna manera no cambiará. Por lo tanto, le sugiero que vaya al paso 2 si tiene requisitos como el cambio dinámico de clase.

Paso 2

<div ng-class="{value1:'class1', value2:'class2'}[condition]"></div>

Salida

si su condición coincide con el valor1, entonces se aplicará la clase1 a su elemento, si coincide con el valor2, se aplicará la clase2 y así sucesivamente. Y el cambio dinámico de clase funcionará bien con él.

Espero que esto te ayudará.


36

La sintaxis angular es usar el operador : para realizar el equivalente de un modificador if

<div ng-class="{ 'clearfix' : (row % 2) == 0 }">

Agregue la clase clearfix a las filas pares. No obstante, la expresión podría ser cualquier cosa que podamos tener en condiciones normales si se debe evaluar como verdadero o falso.


1
¡Agradable! Además, dentro de ng-repeat puedes usar $ even para establecer la clase. Por ejemplo, ng-class = "$ even? 'Even': 'odd'". Otros ingeniosos bools dentro de ng-repeat son $ first, $ last, $ even, $ odd ...
Max

15

Usar la función con ng-class es una buena opción cuando alguien tiene que ejecutar una lógica compleja para decidir la clase CSS adecuada.

http://jsfiddle.net/ms403Ly8/2/

HTML:

<div ng-app>
  <div ng-controller="testCtrl">
        <div ng-class="getCSSClass()">Testing ng-class using function</div>       
    </div>
</div>

CSS:

.testclass { Background: lightBlue}

JavaScript :

function testCtrl($scope) {
    $scope.getCSSClass = function() {
     return "testclass ";
  }     
}

2
Creo que esto mezcla las preocupaciones. Un controlador debe ser más abstracto y no preocuparse por las clases css, sino más bien el estado. Según el estado, las clases css deben aplicarse en la plantilla. De esta forma, el controlador es independiente de la plantilla y más fácil de reutilizar.
Hubert Grzeskowiak

9

utilizar este

<div ng-class="{states}[condition]"></div>

por ejemplo, si la condición es [2 == 2], los estados son {verdadero: '...', falso: '...'}

<div ng-class="{true: 'ClassA', false: 'ClassB'}[condition]"></div>

pero si tengo 3 o más condiciones, ¿esto no funcionaría? ya que esto solo devolverá condiciones verdaderas y falsas
Ali Al Amine

condiciones significa verdadero o falso. ¿Quieres decir algo con más de 2 valores? @AlyAlAmeen
Saeed

7

Para Angular 2, use esto

<div [ngClass]="{'active': dashboardComponent.selected_menu == 'mapview'}">Content</div>

Para ampliar esto, para Angular 2 aplica una clase y también un modificador de clase en un condicional if / else usando una matriz como esta:[ngClass]="['base-class', thread.isActive ? 'base-class--active' : '']"
Matt Rabe

5

ng-classes una directiva de AngularJs centrales. En el que puede utilizar "Sintaxis de cadena", "Sintaxis de matriz", "Expresión evaluada", "Operador ternario" y muchas más opciones que se describen a continuación:

ngClass usando la sintaxis de cadena

Esta es la forma más sencilla de usar ngClass. Simplemente puede agregar una variable angular a ng-class y esa es la clase que se utilizará para ese elemento.

<!-- whatever is typed into this input will be used as the class for the div below -->
<input type="text" ng-model="textType">

<!-- the class will be whatever is typed into the input box above -->
<div ng-class="textType">Look! I'm Words!

Ejemplo de demostración de ngClass usando la sintaxis de cadena

ngClass usando la sintaxis de matriz

Esto es similar al método de sintaxis de cadenas, excepto que puede aplicar varias clases.

<!-- both input boxes below will be classes for the div -->
<input type="text" ng-model="styleOne">
<input type="text" ng-model="styleTwo">

<!-- this div will take on both classes from above -->
<div ng-class="[styleOne, styleTwo]">Look! I'm Words!

ngClass usando expresión evaluada

Un método más avanzado para usar ngClass (y uno que probablemente usará más) es evaluar una expresión. La forma en que esto funciona es que si se evalúa una variable o expresión true, puede aplicar una determinada clase. Si no, entonces la clase no se aplicará.

<!-- input box to toggle a variable to true or false -->
<input type="checkbox" ng-model="awesome"> Are You Awesome?
<input type="checkbox" ng-model="giant"> Are You a Giant?

<!-- add the class 'text-success' if the variable 'awesome' is true -->
<div ng-class="{ 'text-success': awesome, 'text-large': giant }">

Ejemplo de ngClass usando expresión evaluada

ngClass usando valor

Esto es similar al método de expresión evaluado, excepto que solo puede comparar múltiples valores con la única variable.

<div ng-class="{value1:'class1', value2:'class2'}[condition]"></div>

ngClass usando el operador ternario

El operador ternario nos permite usar la taquigrafía para especificar dos clases diferentes, una si una expresión es verdadera y otra para falso. Aquí está la sintaxis básica para el operador ternario:

ng-class="$variableToEvaluate ? 'class-if-true' : 'class-if-false'">

Evaluación del primer, último o número específico

Si está utilizando la ngRepeatdirectiva y que desea aplicar a la clases first, lasto un número específico en la lista, puede utilizar las propiedades especiales de ngRepeat. Estos incluyen $first, $last, $even, $odd, y algunos otros. Aquí hay un ejemplo de cómo usarlos.

<!-- add a class to the first item -->
<ul>
  <li ng-class="{ 'text-success': $first }" ng-repeat="item in items">{{ item.name }}</li>
</ul>

<!-- add a class to the last item -->
<ul>
  <li ng-class="{ 'text-danger': $last }" ng-repeat="item in items">{{ item.name }}</li>
</ul>

<!-- add a class to the even items and a different class to the odd items -->
<ul>
  <li ng-class="{ 'text-info': $even, 'text-danger': $odd }" ng-repeat="item in items">{{ item.name }}</li>
</ul>
Al usar nuestro sitio, usted reconoce que ha leído y comprende nuestra Política de Cookies y Política de Privacidad.
Licensed under cc by-sa 3.0 with attribution required.