¿Cuál es la mejor manera de aplicar condicionalmente una clase?
Digamos que tiene una matriz que se representa en una ulcon una lipara cada elemento y una propiedad en el controlador llamada selectedIndex. ¿ Cuál sería la mejor manera de agregar una clase con liel índice selectedIndexen AngularJS?
Actualmente estoy duplicando (a mano) el licódigo y agregando la clase a una de las lietiquetas y usando ng-showy ng-hidepara mostrar solo una lipor índice.
Si no quieres poner nombres de clases CSS en el Controlador como lo hago yo, aquí tienes un viejo truco que uso desde antes de la versión 1. Podemos escribir una expresión que se evalúe directamente como un nombre de clase seleccionado , no se necesitan directivas personalizadas:
ng:class="{true:'selected', false:''}[$index==selectedIndex]"
Tenga en cuenta la sintaxis antigua con dos puntos.
También hay una nueva forma mejor de aplicar clases condicionalmente, como:
ng-class="{selected: $index==selectedIndex}"
Angular ahora admite expresiones que devuelven un objeto. Cada propiedad (nombre) de este objeto ahora se considera un nombre de clase y se aplica según su valor.
Sin embargo, estas formas no son funcionalmente iguales. Aquí hay un ejemplo:
ng-class="{admin:'enabled', moderator:'disabled', '':'hidden'}[user.role]"
Por lo tanto, podríamos reutilizar las clases CSS existentes básicamente asignando una propiedad del modelo a un nombre de clase y al mismo tiempo mantener las clases CSS fuera del código del Controlador.
ng-class admite una expresión que debe evaluarse como
- Una cadena de nombres de clases delimitados por espacios, o
- Una serie de nombres de clases, o
- Un mapa/objeto de nombres de clases a valores booleanos.
Entonces, usando la forma 3) simplemente podemos escribir
ng-class="{'selected': $index==selectedIndex}"
Consulte también ¿Cómo aplico estilos CSS condicionalmente en AngularJS? para una respuesta más amplia.
Actualización : Angular 1.1.5 ha agregado soporte para un operador ternario , por lo que si esa construcción le resulta más familiar:
ng-class="($index==selectedIndex) ? 'selected' : ''"
Mi método favorito es usar la expresión ternaria.
ng-class="condition ? 'trueClass' : 'falseClass'"
Nota: En caso de que estés usando una versión anterior de Angular, debes usar esta en su lugar.
ng-class="condition && 'trueClass' || 'falseClass'"
