¿Cuál es la mejor manera de aplicar una clase condicionalmente?

Digamos que tiene una matriz que se representa en un ul con un li para cada elemento y una propiedad en el controlador llamada selectedIndex . ¿Cuál sería la mejor manera de agregar una clase a la li con el índice selectedIndex en AngularJS?

Actualmente estoy duplicando (a mano) el código li y agregando la clase a una de las tags li y usando ng-show y ng-hide para mostrar solo una li por índice.

Si no quieres poner los nombres de las clases de CSS en Controller como yo, aquí hay un viejo truco que utilizo desde pre-v1 días. Podemos escribir una expresión que evalúe directamente un nombre de clase seleccionado , no son necesarias directivas personalizadas:

 ng:class="{true:'selected', false:''}[$index==selectedIndex]" 

Tenga en cuenta la syntax 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 como 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 existentes de CSS asignando básicamente una propiedad de 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 evaluar a cualquiera

  1. Una cadena de nombres de clase delimitados por espacios, o
  2. Una matriz de nombres de clase, o
  3. Un mapa / objeto de nombres de clase a valores booleanos.

Entonces, usando la forma 3) simplemente podemos escribir

 ng-class="{'selected': $index==selectedIndex}" 

Consulte también ¿Cómo aplico condicionalmente estilos CSS 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 ese constructo es más familiar para usted:

 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é usando una versión anterior de Angular, debería usar esto en su lugar,

 ng-class="condition && 'trueClass' || 'falseClass'" 

Añadiré a esto, porque algunas de estas respuestas parecen desactualizadas. Así es como lo hago:

  

Donde ‘isSelected’ es una variable de javascript definida dentro del controlador angular de ámbito.

Para abordar su pregunta de manera más específica, esta es la forma en que puede generar una lista con eso:

HTML

 
  • {{item.name}}
  • JS

     function ListCtrl($scope) { $scope.list = [ {"name": "Item 1", "isSelected": "active"}, {"name": "Item 2", "isSelected": ""} ] } 

    Ver: http://jsfiddle.net/tTfWM/

    Ver: http://docs.angularjs.org/api/ng.directive:ngClass

    Aquí hay una solución mucho más simple:

     function MyControl($scope){ $scope.values = ["a","b","c","d","e","f"]; $scope.selectedIndex = -1; $scope.toggleSelect = function(ind){ if( ind === $scope.selectedIndex ){ $scope.selectedIndex = -1; } else{ $scope.selectedIndex = ind; } } $scope.getClass = function(ind){ if( ind === $scope.selectedIndex ){ return "selected"; } else{ return ""; } } $scope.getButtonLabel = function(ind){ if( ind === $scope.selectedIndex ){ return "Deselect"; } else{ return "Select"; } } } 
     .selected { color:red; } 
      
    • {{value}}

    Selected: {{selectedIndex}}

    Recientemente me enfrenté a un problema similar y decidí simplemente crear un filtro condicional:

      angular.module('myFilters', []). /** * "if" filter * Simple filter useful for conditionally applying CSS classes and decouple * view from controller */ filter('if', function() { return function(input, value) { if (typeof(input) === 'string') { input = [input, '']; } return value? input[0] : input[1]; }; }); 

    Toma un solo argumento, que es una matriz de 2 elementos o una cadena, que se convierte en una matriz a la que se agrega una cadena vacía como segundo elemento:

     
  • ...
  • Si desea ir más allá de la evaluación binaria y mantener su CSS fuera de su controlador, puede implementar un filtro simple que evalúe la entrada contra un objeto de mapa:

     angular.module('myApp.filters, []) .filter('switch', function () { return function (input, map) { return map[input] || ''; }; }); 

    Esto le permite escribir su marcado de esta manera:

     
    ...

    El operador ternario acaba de ser agregado al analizador angular en 1.1.5 .

    Entonces la forma más simple de hacer esto es ahora:

     ng:class="($index==selectedIndex)? 'selected' : ''" 

    Lo que hice hace poco fue esto:

      

    El valor de isShowing es un valor que se encuentra en mi controlador que se alterna con el clic de un botón y las partes entre paréntesis individuales son clases que creé en mi archivo css.

    EDITAR: También me gustaría añadir que codeschool.com tiene un curso gratuito patrocinado por google en AngularJS que repasa todas estas cosas y más. ¡No hay necesidad de pagar por nada, simplemente regístrese para obtener una cuenta y comience! ¡La mejor de las suertes para todos ustedes!

    Podemos hacer una función para administrar la clase de devolución con la condición

    enter image description here

      

    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

    Soy nuevo en Angular pero he encontrado esto para resolver mi problema:

      

    Esto aplicará condicionalmente una clase basada en una var. Empieza con una descarga de íconos por defecto, utilizando ng-class, showDetails el estado de showDetails si es true/false y aplica el ícono de clase -upload . Funciona muy bien.

    Espero eso ayude.

    Funciona correctamente;)

      

    Esto probablemente será downvoted al olvido, pero así es como utilicé los operadores ternarios de 1.1.5 para cambiar las clases dependiendo de si una fila en una tabla es la primera, la mitad o la última, excepto si solo hay una fila en la tabla:

       

    Aquí hay otra opción que funciona bien cuando ng-class no se puede usar (por ejemplo, al diseñar SVG):

     ng-attr-class="{{someBoolean && 'class-when-true' || 'class-when-false' }}" 

    (Creo que necesitas estar en el último Angular inestable para usar ng-attr-, actualmente estoy en 1.1.4)

    Bueno, le sugiero que verifique la condición en su controlador con una función que devuelva verdadero o falso .

     
    {{day.date}}

    y en tu controlador verifica la condición

     $scope.getTodayForHighLight = function(today, date){ return (today == date); } 

    parcial

       

    controlador

      $scope.campaign_range = "all"; $scope.change_range = function(range) { if (range === "all") { $scope.campaign_range = "all" } else { $scope.campaign_range = "thismonth" } }; 

    Esto es en mi trabajo juez condicional múltiple:

     
  • {{eOption.eoSequence}}     |     2020 元
  • Si está utilizando angular pre v1.1.5 (es decir, no es un operador ternario) y aún desea una forma equivalente de establecer un valor en ambas condiciones, puede hacer algo como esto:

     ng-class="{'class1':item.isReadOnly == false, 'class2':item.isReadOnly == true}" 

    Si tiene una clase común que se aplica a muchos elementos, puede crear una directiva personalizada que agregará esa clase como ng-show / ng-hide.

    Esta directiva agregará la clase ‘activa’ al botón si se hace clic

     module.directive('ngActive', ['$animate', function($animate) { return function(scope, element, attr) { scope.$watch(attr.ngActive, function ngActiveWatchAction(value){ $animate[value ? 'addClass' : 'removeClass'](element, 'active'); }); }; }]); 

    Más información

    Solo agregué algo que funcionó para mí hoy, después de mucho buscar …

     

    Espero que esto ayude en tu desarrollo exitoso.

    =)

    Sintaxis de la expresión indocumentada: gran enlace al sitio web … =)

    Consulte http://www.codinginsight.com/angularjs-if-else-statement/

    La infame statement angularjs if else !!! Cuando comencé a usar Angularjs, me sorprendió un poco que no pudiera encontrar una instrucción if / else.

    Así que estaba trabajando en un proyecto y noté que al usar la instrucción if / else, la condición se muestra mientras se carga. Puedes usar ng-cloak para arreglar esto.

     

    Show this line

    Show this line instead

    .ng-cloak { display: none }

    Gracias amadou

    Puedes usar este paquete npm. Maneja todo y tiene opciones para clases estáticas y condicionales basadas en una variable o una función.

     // Support for string arguments getClassNames('class1', 'class2'); // support for Object getClassNames({class1: true, class2 : false}); // support for all type of data getClassNames('class1', 'class2', ['class3', 'class4'], { class5 : function() { return false; }, class6 : function() { return true; } });