Quelle est la meilleure façon conditionnelle, appliquer une classe?

permet de dire que vous avez un tableau qui est rendu dans un ul avec un li pour chaque élément et une propriété sur le contrôleur appelé selectedIndex . Quelle serait la meilleure façon d'ajouter une classe au li avec l'index selectedIndex à AngularJS?

je suis en train de dupliquer (à la main) le code li et d'ajouter la classe à l'une des étiquettes li et en utilisant ng-show et ng-hide pour afficher seulement un li par index.

1140
demandé sur Damjan Pavlica 2011-10-17 14:49:52
la source

22 ответов

si vous ne voulez pas mettre les noms de classe CSS dans le contrôleur comme je le fais, voici un vieux truc que j'utilise depuis les jours pré-v1. Nous pouvons écrire une expression qui évalue directement à un nom de classe sélectionné , aucune directive personnalisée n'est nécessaire:

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

veuillez noter l'ancienne syntaxe avec deux points.

il y a aussi une nouvelle meilleure façon d'appliquer les classes conditionnellement, comme:

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

Angular supporte maintenant les expressions qui renvoient un objet. Chaque propriété (Nom) de cet objet est maintenant considéré comme un nom de classe et est appliqué en fonction de sa valeur.

cependant ces façons ne sont pas fonctionnellement égales. Voici un exemple:

ng-class="{admin:'enabled', moderator:'disabled', '':'hidden'}[user.role]"

nous pourrions donc réutiliser les classes CSS existantes en schématisant fondamentalement une propriété model à un nom de classe et en gardant en même temps les classes CSS hors du Code du contrôleur.

1371
répondu orcun 2017-01-06 16:44:01
la source

classe ng supporte une expression qui doit évaluer soit

  1. une chaîne de noms de classe délimités par l'espace, ou
  2. un tableau de noms de classe, ou
  3. une carte/objet des noms de classe aux valeurs booléennes.

ainsi, en utilisant le formulaire 3) nous pouvons simplement écrire

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

Voir aussi Comment puis-je conditionnellement appliquer des styles CSS dans AngularJS? pour une réponse plus large.


mise à jour : angulaire 1.1.5 a ajouté le soutien pour un opérateur ternaire , donc si cette construction vous est plus familière:

ng-class="($index==selectedIndex) ? 'selected' : ''"
432
répondu Mark Rajcok 2017-05-23 15:26:36
la source

ma méthode préférée est d'utiliser l'expression ternaire.

ng-class="condition ? 'trueClass' : 'falseClass'"

Note: au Cas où vous utilisez une ancienne version de Anguleuses, vous devriez utiliser ce lieu,

ng-class="condition && 'trueClass' || 'falseClass'"
156
répondu skmvasu 2013-09-27 17:39:22
la source

j'ajouterai à cela, parce que certaines de ces réponses semblent périmées. Voici comment je le fais:

<class="ng-class:isSelected">

où 'isSelected' est une variable javascript définie dans le régulateur angulaire scoped.





Pour mieux répondre à votre question, voici comment vous pouvez générer une liste avec que:



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



Voir: http://jsfiddle.net/tTfWM /

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

53
répondu stefano 2012-09-27 06:01:38
la source

Voici une solution beaucoup plus 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>
46
répondu 2014-10-16 15:24:50
la source

j'ai fait face à un problème similaire récemment et j'ai décidé de créer un filtre conditionnel:

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

il prend un seul argument, qui est soit un tableau à 2 éléments ou une chaîne, qui se transforme en un tableau qui est ajouté une chaîne vide comme second élément:

<li ng-repeat="item in products | filter:search | orderBy:orderProp |
  page:pageNum:pageLength" ng-class="'opened'|if:isOpen(item)">
  ...
</li>
26
répondu Lèse majesté 2012-07-26 11:53:47
la source

si vous voulez aller au-delà de l'évaluation binaire et garder votre CSS hors de votre controller, vous pouvez implémenter un filtre simple qui évalue l'entrée par rapport à un objet map:

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

cela vous permet d'écrire votre markup comme ceci:

<div ng-class="muppets.star|switch:{'Kermit':'green', 'Miss Piggy': 'pink', 'Animal': 'loud'}">
    ...
</div>
21
répondu Joe Steele 2012-09-04 18:35:11
la source

opérateur ternaire vient d'être ajouté au parser angulaire dans 1.1.5 .

donc la façon la plus simple de faire ceci est maintenant:

ng:class="($index==selectedIndex)? 'selected' : ''"
15
répondu lionroots 2013-05-23 12:32:50
la source

l'était que j'ai fait récemment qui faisait ceci:

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

la valeur isShowing est une valeur qui se trouve sur mon contrôleur et qui est activée par le clic d'un bouton et les parties entre parenthèses sont des classes que j'ai créées dans mon fichier css.

EDIT: je voudrais aussi ajouter que codeschool.com a un cours gratuit qui est parrainé par google sur AngularJS qui passe en revue tous ces trucs et puis certains. Il n'est pas nécessaire rien à payer, juste à vous inscrire à un compte et aller de l'avant! Bonne chance à vous tous!

15
répondu Pytth 2014-06-06 00:27:14
la source

Nous pouvons faire une fonction pour gérer le retour de la classe, avec la condition

enter image description here

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

et ensuite

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

vous pouvez vous référer à la page de code complète à classe ng si exemple

11
répondu Lewis Hai 2017-07-27 04:46:55
la source

Je suis nouveau à Angular mais j'ai trouvé ceci pour résoudre mon problème:

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

cette modification s'applique sous condition à une catégorie basée sur une var. Il commence avec une icône - télécharger par défaut, la classe ng, je vérifie le statut de showDetails si true/false et appliquer la classe icône-Télécharger . Son bon fonctionnement.

J'espère que ça aidera.

9
répondu Ravi Ram 2013-07-24 18:57:33
la source

Il fonctionne correctement ;)

<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>
7
répondu Aliti 2016-04-07 00:05:36
la source

ce sera probablement rétrogradé à l'oubli, mais voici comment j'ai utilisé les opérateurs ternaires de 1.1.5 Pour changer de classe selon qu'une rangée dans une table est la première, la moyenne ou la dernière -- sauf s'il n'y a qu'une seule rangée dans la table:

<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>
5
répondu sundar 2013-06-10 02:30:53
la source

Voici une autre option qui fonctionne bien lorsque la classe ng ne peut pas être utilisée (par exemple lors de la conception SVG):

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

(je pense que vous devez être sur les dernières instable Angulaire d'utiliser ng-attr-, je suis actuellement sur 1.1.4)

4
répondu Ashley Davis 2013-05-21 16:11:04
la source

Eh bien, je vous suggérerais de vérifier l'état de votre contrôleur avec une fonction retournant vrai ou faux .

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

et dans votre contrôleur, vérifiez la condition

$scope.getTodayForHighLight = function(today, date){
return (today == date);
}
4
répondu sheelpriy 2015-06-06 14:11:57
la source

partiel

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

contrôleur

  $scope.campaign_range = "all";
  $scope.change_range = function(range) { 
        if (range === "all")
        {
            $scope.campaign_range = "all"
        }
        else
        {  
            $scope.campaign_range = "thismonth"
        }
  };
4
répondu Caner Çakmak 2016-11-21 16:37:37
la source

c'est dans mon travail juge multiple conditionnellement:

<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>
4
répondu H.jame 2017-01-15 22:21:52
la source

si vous utilisez angular pre v1.1.5 (c'est-à-dire sans opérateur ternaire) et vous voulez toujours une façon équivalente de définir une valeur dans les deux "conditions 151930920" vous pouvez faire quelque chose comme ceci:

ng-class="{'class1':item.isReadOnly == false, 'class2':item.isReadOnly == true}"
3
répondu Scotty.NET 2013-07-22 18:25:57
la source

si vous avez une classe commune qui est appliquée à de nombreux éléments, vous pouvez créer une directive personnalisée qui ajoutera cette classe comme ng-show/ng-hide.

cette directive ajoutera la classe "active" au bouton si elle est cliquée

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

plus d'information

3
répondu lars1595 2014-04-03 13:13:06
la source

Juste ajouter quelque chose qui a fonctionné pour moi aujourd'hui, après beaucoup de recherches...

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

J'espère que cela vous aidera dans votre développement réussi.

=)

Syntaxe D'Expression Non Documentée : Grand Lien De Site Web... = )

3
répondu Robert Green MBA 2014-09-25 00:55:15
la source

contrôle http://www.codinginsight.com/angularjs-if-else-statement /

l'infâme déclaration angularjs if else!!! Quand J'ai commencé à utiliser Angularjs, j'ai été un peu surpris de ne pas trouver de déclaration si/else.

donc je travaillais sur un projet et j'ai remarqué que lors de l'utilisation de l'instruction if/else, la condition apparaît lors du chargement. Vous pouvez utiliser ng-cape pour réparer ça.

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

Merci amadou

3
répondu Victor Cruz 2016-11-21 16:37:13
la source

vous pouvez utiliser ce paquet npm. Il gère tout et dispose d'options pour les classes statiques et conditionnelles basées sur une variable ou une fonction.

// 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})} />
0
répondu Tushar Sharma 2017-12-05 08:47:45
la source

Autres questions sur css angularjs