varias - selectores de atributos css




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

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.


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

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


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>


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

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

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>

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>

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


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>

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>

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

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



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




angularjs