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




ejemplo tipo (19)

El operador ternario se acaba de agregar al analizador angular en 1.1.5 .

Así que la forma más sencilla de hacer esto es ahora:

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

Digamos que tiene una matriz que se representa en una ul con un li para cada elemento y una propiedad en el controlador llamado 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 etiquetas li y usando ng-show y ng-hide para mostrar solo un li por índice.


Lo que hice hace poco fue hacer esto:

<input type="password"  placeholder="Enter your password"
ng-class="{true: 'form-control isActive', false: 'isNotActive'}[isShowing]">

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 agregar que codeschool.com tiene un curso gratuito patrocinado por Google en AngularJS que analiza todo esto y algo más. No hay necesidad de pagar por nada, solo regístrese para obtener una cuenta y ponerse en marcha. ¡La mejor de las suertes para todos ustedes!


Podemos hacer una función para gestionar la clase de retorno con condición.

<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) {
                    switch(strValue) {
                        case "It is Red":return "Red";break;
                        case "It is Yellow":return "Yellow";break;
                        case "It is Blue":return "Blue";break;
                        case "It is Green":return "Green";break;
                        case "It is Gray":return "Gray";break;
                    }
                }
        }]);
</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 el ejemplo


Si no quiere poner nombres de clase CSS en Controller como lo hago yo, aquí hay un viejo truco que utilizo desde los días anteriores a la v1. Podemos escribir una expresión que se evalúe directamente a un nombre de clase seleccionado , no se necesitan directivas personalizadas:

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

Tenga en cuenta la antigua sintaxis 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 modelo a un nombre de clase y al mismo tiempo mantener las clases CSS fuera del código del Controlador.


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'"

Hace poco enfrenté un problema similar y decidí 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 que se agrega una cadena vacía como el segundo elemento:

<li ng-repeat="item in products | filter:search | orderBy:orderProp |
  page:pageNum:pageLength" ng-class="'opened'|if:isOpen(item)">
  ...
</li>

Puede utilizar this 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; }
});

<div className={getClassNames({class1: true, class2 : false})} />


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

<i class="icon-download" ng-click="showDetails = ! showDetails" ng-class="{'icon-upload': showDetails}"></i>

Esto aplicará condicionalmente una clase basada en una var. Comienza con una descarga de iconos por defecto, usando ng-class, showDetails el estado de showDetails si es true/false y aplico la carga de iconos de clase. Está funcionando muy bien.

Espero eso ayude.


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

Los angulosos infames de la declaración if else !!! Cuando comencé a usar Angularjs, me sorprendió un poco que no pudiera encontrar una sentencia 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.

<div class="ng-cloak">
 <p ng-show="statement">Show this line</span>
 <p ng-hide="statement">Show this line instead</span>
</div>

.ng-cloak { display: none }

Gracias amadou


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

<class="ng-class:isSelected">

Donde 'isSelected' es una variable de javascript definida dentro del controlador angular con ámbito.


Para abordar más específicamente su pregunta, aquí le explicamos cómo puede generar una lista con eso:

HTML

<div ng-controller="ListCtrl">  
    <li class="ng-class:item.isSelected" ng-repeat="item in list">   
       {{item.name}}
    </li>  
</div>


JS

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


Consulte: http://jsfiddle.net/tTfWM/

Consulte: ng-class


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 marca de esta manera:

<div ng-class="muppets.star|switch:{'Kermit':'green', 'Miss Piggy': 'pink', 'Animal': 'loud'}">
    ...
</div>

Aquí hay otra opción que funciona bien cuando no se puede usar ng-class (por ejemplo, al estilo de 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)


parcial

  <div class="col-md-4 text-right">
      <a ng-class="campaign_range === 'thismonth' ? 'btn btn-blue' :  'btn btn-link'" href="#" ng-click='change_range("thismonth")'>This Month</a>
      <a ng-class="campaign_range === 'all' ? 'btn btn-blue' :  'btn btn-link'" href="#" ng-click='change_range("all")'>All Time</a>
  </div>

controlador

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

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


Esto es en mi trabajo juez condicional múltiple:

<li ng-repeat='eOption in exam.examOptions' ng-class="exam.examTitle.ANSWER_COM==exam.examTitle.RIGHT_ANSWER?(eOption.eoSequence==exam.examTitle.ANSWER_COM?'right':''):eOption.eoSequence==exam.examTitle.ANSWER_COM?'wrong':eOption.eoSequence==exam.examTitle.RIGHT_ANSWER?'right':''">
  <strong>{{eOption.eoSequence}}</strong> &nbsp;&nbsp;&nbsp;&nbsp;|&nbsp;&nbsp;&nbsp;&nbsp;
  <span ng-bind-html="eOption.eoName | to_trusted">2020 元</span>
</li>

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 el formulario 3) podemos simplemente escribir

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

Vea también ¿Cómo aplico condicionalmente los 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 esa construcción es más familiar para usted:

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

Probablemente, esto se reducirá al olvido, pero aquí es cómo usé los operadores ternarios de 1.1.5 para cambiar las clases dependiendo de si una fila en una tabla es la primera, la media o la última, excepto si solo hay una fila en la tabla:

<span class="attribute-row" ng-class="(restaurant.Attributes.length === 1) || ($first ? 'attribute-first-row': false || $middle ? 'attribute-middle-row': false || $last ? 'attribute-last-row': false)">
</span>

Con respecto a la solución aceptada, la publicada por Ashley Davis, el método descrito aún imprime el atributo en el DOM, independientemente del hecho de que el valor que se ha asignado no está definido.

Por ejemplo, en una configuración de campo de entrada con un modelo ng y un atributo de valor:

<input type="text" name="myInput" data-ng-attr-value="{{myValue}}" data-ng-model="myModel" />

Independientemente de lo que haya detrás de myValue, el atributo de valor aún se imprime en el DOM, por lo tanto, se interpreta. Ng-modelo entonces, se anula.

Un poco desagradable, pero usar ng-if tiene el truco:

<input type="text" name="myInput" data-ng-if="value" data-ng-attr-value="{{myValue}}" data-ng-model="myModel" />
<input type="text" name="myInput" data-ng-if="!value" data-ng-model="myModel" />

Recomendaría utilizar un control más detallado dentro de las directivas ng-if :)





css angularjs