Expression if-else de la classe ng AngularJS

257

Avec AngularJSj'utilise ng-classla manière suivante:

<div class="bigIcon" data-ng-click="PickUp()" 
ng-class="{first:'classA', second:'classB', third:'classC', fourth:'classC'}[call.State]"/>

Je me demande si je peux utiliser l' if-elseexpression pour faire quelque chose de similaire à ceci:

<div class="bigIcon" data-ng-click="PickUp()" 
ng-class="{first:'classA', second:'classB', else:'classC'}[call.State]"/>

Donc, à chaque fois que call.Statediffère firstou secondutilise classCet éviter de spécifier chaque valeur?

angularjs ng-class Dor Cohen
la source

Réponses:

523

Utiliser des instructions imbriquées imbriquées en ligne ( opérateurs ternaires )

<div ng-class=" ... ? 'class-1' : ( ... ? 'class-2' : 'class-3')">

par exemple :

<div ng-class="apt.name.length >= 15 ? 'col-md-12' : (apt.name.length >= 10 ? 'col-md-6' : 'col-md-4')">
    ...
</div>

Et assurez-vous qu'il est lisible par vos collègues :)

Jossef Harush
la source
2
Et si j'ai besoin d'ajouter deux classes?
mircobabini
2
Désolé, je veux dire "une classe si ceci ET une autre classe si cela". Deux classes, deux conditions différentes.
mircobabini
17
@mircobabini, ng-class="{'class1': ##condition1## , 'class2': ##condition2## }"comme vous pouvez le voir dans la question ci
Jossef Harush
2
Ce n'est pas quelque chose que je veux voir dans la vue. Beaucoup trop de logique pour la vue.
AturSams
19
@Zehelvion Je serais en désaccord. C'est la logique de la vue. Vous ne voudriez pas dicter la classe de colonne à utiliser dans votre contrôleur ou un service .. c'est là que cela devrait être.
Nick
108

vous pouvez essayer en utilisant une fonction comme celle-ci:

<div ng-class='whatClassIsIt(call.State)'>

Mettez ensuite votre logique dans la fonction elle-même:

    $scope.whatClassIsIt= function(someValue){
     if(someValue=="first")
            return "ClassA"
     else if(someValue=="second")
         return "ClassB";
     else
         return "ClassC";
    }

J'ai fait un violon avec un exemple: http://jsfiddle.net/DotDotDot/nMk6M/

DotDotDot
la source
6
C'est une bien meilleure solution que les opérateurs ternaires imbriqués
David dit Réintégrer Monica
2
Aimer. Cela maintient le html encore plus propre qu'un simple conditionnel de classe ng.
mrgnw
17
Le problème avec cette approche est que vous informez le contrôleur des classes CSS. Pas une bonne approche. Avoir une variable définie dans le contrôleur, puis déterminer la classe à utiliser dans le HTML à partir de la variable est la meilleure solution.
VtoCorleone
1
Ceci est juste un indice sur la façon dont vous pouvez le faire, ce problème était assez simple pour être traité avec un opérateur ternaire, mais lorsque vous avez besoin de plus de logique, vous ne voulez pas le faire directement dans le HTML, l'une des solutions les plus rapides est , comme je l'ai fait, pour utiliser une fonction dans votre contrôleur pour cela (si vous ne voulez pas que le contrôleur soit au courant du CSS, vous pouvez également regarder et définir une variable de portée et utiliser une condition dans le HTML basée sur cette valeur ). Mais, si vous avez un peu plus de logique, ou de nombreuses répétitions, mettez cela dans une directive, ça devrait être plus propre. L'exemple consistait principalement à NE PAS mettre de logique dans le HTML
DotDotDot
1
mieux que les opérateurs ternaires si vous devez ajouter une condition pour plus de 2 ou 3 classes différentes, séparez le html avec la logique :)
Tho Vo
61

J'ai eu une situation où j'avais besoin de deux déclarations `` si '' qui pourraient à la fois devenir vraies et un `` autre '' ou par défaut si aucune n'était vraie, je ne sais pas si c'est une amélioration de la réponse de Jossef mais cela me semblait plus propre: 

ng-class="{'class-one' : value.one , 'class-two' : value.two}" class="else-class"

Lorsque value.one et value.two sont vraies, elles ont priorité sur la classe .else

joel.bowen
la source
13

Clairement ! Nous pouvons créer une fonction pour renvoyer un nom de classe CSS avec l'exemple complet suivant. entrez la description de l'image ici

CSS

<style>
    .Red {
        color: Red;
    }
    .Yellow {
        color: Yellow;
    }
      .Blue {
        color: Blue;
    }
      .Green {
        color: Green;
    }
    .Gray {
        color: Gray;
    }
     .b{
         font-weight: bold;
    }
</style>

JS

<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) {
                    if (strValue == ("It is Red"))
                        return "Red";
                    else if (strValue == ("It is Yellow"))
                        return "Yellow";
                    else if (strValue == ("It is Blue"))
                        return "Blue";
                    else if (strValue == ("It is Green"))
                        return "Green";
                    else if (strValue == ("It is Gray"))
                        return "Gray";
                }
        }]);
</script>

Puis 

<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 à ng-class si exemple

Lewis Hai
la source
3

Les solutions ci-dessus n'ont pas fonctionné pour moi pour les cours avec des images d'arrière-plan d'une manière ou d'une autre. Ce que j'ai fait, c'est créer une classe par défaut (celle dont vous avez besoin ailleurs) et définir class = 'defaultClass', puis ng-class = "{class1: abc, class2: xyz}"

<span class="booking_warning" ng-class="{ process_success: booking.bookingStatus == 'BOOKING_COMPLETED' || booking.bookingStatus == 'BOOKING_PROCESSED', booking_info: booking.bookingStatus == 'INSTANT_BOOKING_REQUEST_RECEIVED' || booking.bookingStatus == 'BOOKING_PENDING'}"> <strong>{{booking.bookingStatus}}</strong> </span>

PS: Les classes qui sont en condition doivent remplacer la classe par défaut c'est-à-dire marquées comme! Important

Kazim Homayee
la source
1

C'est le moyen le plus fiable et le plus sûr de le faire. Voici un exemple simple et après cela, vous pouvez développer votre logique personnalisée:

//In .ts
public showUploadButton:boolean = false;

if(some logic)
{
    //your logic
    showUploadButton = true;
}

//In template
<button [class]="showUploadButton ? 'btn btn-default': 'btn btn-info'">Upload</button>
Avtandil Kavrelishvili
la source
0

Une solution consiste à manipuler une variable de modèle uniquement pour le basculement de classe ng:

Par exemple, je souhaite basculer la classe en fonction de l'état de ma liste:

1) Chaque fois que ma liste est vide, je mets à jour mon modèle:

$scope.extract = function(removeItemId) {
    $scope.list= jQuery.grep($scope.list, function(item){return item.id != removeItemId});
    if (!$scope.list.length) {
        $scope.liststate = "empty";
    }
}

2) Chaque fois que ma liste n'est pas vide, je mets un autre état

$scope.extract = function(item) {
    $scope.list.push(item);
    $scope.liststate = "notempty";
}

3) Lorsque ma liste n'est jamais touchée, je veux donner une autre classe (c'est là que la page est lancée):

$scope.liststate = "init";

3) J'utilise ce modèle supplémentaire sur ma classe ng:

ng-class="{'bg-empty': liststate == 'empty', 'bg-notempty': liststate == 'notempty', 'bg-init': liststate = 'init'}"
Bahadir Tasdemir
la source
0

Utilisez-le de cette façon:

    <div [ngClass]="{cssClass A: condition 1, cssClass B: condition 2, cssClass C: condition 3}">...</div>
BLACKRIGAN
la source
-3

Vous pouvez essayer cette méthode:

</p><br /><br />
<p>ng-class="{test: obj.value1 == 'someothervalue' || obj.value2 == 'somethingelse'}<br /><br /><br />

ng-class="{test: obj.value1 == 'someothervalue' || obj.value2 == 'somethingelse'}

Vous pouvez obtenir tous les détails ici .

Ehtesham Shami
la source