tipo - selectores css avanzados

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

Question

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.

Answer 1

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"
        }
  };

Answer 2

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

Answer 3

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)

Answer 4

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;
}

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.1/angular.min.js"></script>
<div ng-app ng-controller="MyControl">
    <ul>
        <li ng-class="getClass($index)" ng-repeat="value in values" >{{value}} <button ng-click="toggleSelect($index)">{{getButtonLabel($index)}}</button></li>
    </ul>
    <p>Selected: {{selectedIndex}}</p>
</div>

Answer 5

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

<div class="week-wrap" ng-class="{today: getTodayForHighLight(todayDate, day.date)}">{{day.date}}</div>

y en su controlador verifique la condición

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

Answer 6

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

Answer 7

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

Answer 8

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>

Answer 9

Funciona correctamente;)

<ul class="nav nav-pills" ng-init="selectedType = ''return''">
    <li role="presentation" ng-class="{''active'':selectedType === ''return''}"
        ng-click="selectedType = ''return''"><a href="#return">return

    </a></li>
    <li role="presentation" ng-class="{''active'':selectedType === ''oneway''}"
        ng-click="selectedType = ''oneway''"><a href="#oneway">oneway
    </a></li>
</ul>

Answer 10

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>

Answer 11

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!

Answer 12

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

Answer 13

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

Answer 14

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>

Answer 15

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})} />

Answer 16

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>

Answer 17

Si está utilizando angular pre v1.1.5 (es decir, sin 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}"

Answer 18

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.

Answer 19

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

Answer 20

Simplemente agregando algo que funcionó para mí hoy, después de mucho buscar ...

<div class="form-group" ng-class="{true: ''has-error''}[ctrl.submitted && myForm.myField.$error.required]">

Espero que esto ayude en su desarrollo exitoso.

=)

Sintaxis de expresión no documentada: Gran enlace de sitio web ... =)

Answer 21

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.

Answer 22

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