Existe-t-il un moyen de faire une expression pour quelque chose comme ng-classêtre un conditionnel?

Par exemple, j'ai essayé ce qui suit:

<span ng-class="{test: 'obj.value1 == \'someothervalue\''}">test</span>

Le problème avec ce code est que, quoi qu'il en obj.value1soit, le test de classe est toujours appliqué à l'élément. Ce faisant:

<span ng-class="{test: obj.value2}">test</span>

Tant que obj.value2ne correspond pas à une valeur véridique, la classe n'est pas appliquée. Maintenant, je peux contourner le problème dans le premier exemple en procédant comme suit:

<span ng-class="{test: checkValue1()}">test</span>

Où la checkValue1fonction ressemble à ceci:

$scope.checkValue1 = function() {
  return $scope.obj.value === 'somevalue';
}

Je me demande simplement si c'est ainsi que cela ng-classest censé fonctionner. Je construis également une directive personnalisée dans laquelle j'aimerais faire quelque chose de similaire à cela. Cependant, je ne peux pas trouver un moyen de regarder une expression (et c'est peut-être impossible et la raison pour laquelle cela fonctionne comme ça).

Voici un plnkr pour montrer ce que je veux dire.

Votre première tentative était presque juste, cela devrait fonctionner sans les guillemets.

{test: obj.value1 == 'someothervalue'}

Voici un plnkr .

La directive ngClass fonctionnera avec n'importe quelle expression qui évalue véridique ou falsey, un peu similaire aux expressions Javascript mais avec quelques différences, vous pouvez lire ici . Si votre conditionnel est trop complexe, vous pouvez utiliser une fonction qui retourne true ou falsey, comme vous l'avez fait lors de votre troisième tentative.

Juste pour compléter: vous pouvez également utiliser des opérateurs logiques pour former des expressions logiques comme

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

Utilisation de ng-class dans ng-repeat

<table>
    <tbody>
            <tr ng-repeat="task in todos"
                ng-class="{'warning': task.status == 'Hold' , 'success': task.status == 'Completed',
              'active': task.status == 'Started', 'danger': task.status == 'Pending' } ">
                <td>{{$index + 1}}</td>
                <td>{{task.name}}</td>
                <td>{{task.date|date:'yyyy-MM-dd'}}</td>
                <td>{{task.status}}</td>
            </tr>
    </tbody>
</table>

Pour chaque état dans task.status, une classe différente est utilisée pour la ligne.

Angular JS fournit cette fonctionnalité dans la directive ng-class . Dans lequel vous pouvez mettre une condition et également affecter une classe conditionnelle. Vous pouvez y parvenir de deux manières différentes.

Type 1

<div ng-class="{0:'one', 1:'two',2:'three'}[status]"></div>

Dans cette classe , le code sera applicable en fonction de la valeur de l' état valeur

si la valeur d' état est 0, appliquer la classe 1

si la valeur d' état est 1, appliquer la classe deux

si la valeur d' état est 2, appliquer la classe trois

Type 2

<div ng-class="{1:'test_yes', 0:'test_no'}[status]"></div>

Dans quelle classe sera appliqué par valeur de statut

si la valeur d' état est 1 ou vraie, alors il ajoutera la classe test_yes

si la valeur de l' état est 0 ou fausse, cela ajoutera la classe test_no

Je vois de grands exemples ci-dessus mais ils commencent tous par des accolades (carte json). Une autre option consiste à renvoyer un résultat basé sur le calcul. Le résultat peut également être une liste de noms de classes css (pas seulement une carte). Exemple:

ng-class="(status=='active') ? 'enabled' : 'disabled'"

ou

ng-class="(status=='active') ? ['enabled'] : ['disabled', 'alik']"

Explication: Si le statut est actif, la classe enabledsera utilisée. Sinon, la classe disabledsera utilisée.

La liste []est utilisée pour utiliser plusieurs classes (pas une seule).

Il existe une méthode simple que vous pouvez utiliser avec l'attribut de classe html et le raccourci if / else. Pas besoin de le rendre si complexe. Utilisez simplement la méthode suivante.

<div class="{{expression == true ? 'class_if_expression_true' : 'class_if_expression_false' }}">Your Content</div>

Joyeux codage, Nimantha Perera

Je vais vous montrer deux méthodes par lesquelles vous pouvez appliquer dynamiquement la classe ng

Étape 1

En utilisant l'opérateur ternaire

<div ng-class="condition?'class1':'class2'"></div>

Production

Si votre condition est vraie, alors class1 sera appliqué à votre élément, sinon class2 sera appliqué.

Désavantage

Lorsque vous essayez de modifier la valeur conditionnelle au moment de l'exécution, la classe ne change pas. Je vous propose donc de passer à l'étape 2 si vous avez des exigences telles que le changement de classe dynamique.

Étape 2

<div ng-class="{value1:'class1', value2:'class2'}[condition]"></div>

Production

si votre condition correspond à valeur1, alors classe1 sera appliquée à votre élément, si correspond à valeur2, alors classe2 sera appliquée et ainsi de suite. Et le changement de classe dynamique fonctionnera bien avec cela.

J'espère que cela vous aidera.

La syntaxe angulaire consiste à utiliser l' opérateur : pour effectuer l'équivalent d'un modificateur if

<div ng-class="{ 'clearfix' : (row % 2) == 0 }">

Ajoutez la classe clearfix aux lignes paires. Néanmoins, l'expression pourrait être tout ce que nous pouvons avoir dans un état normal et elle devrait être vraie ou fausse.

L'utilisation de la fonction avec ng-class est une bonne option lorsque quelqu'un doit exécuter une logique complexe pour décider de la classe CSS appropriée.

http://jsfiddle.net/ms403Ly8/2/

HTML:

<div ng-app>
  <div ng-controller="testCtrl">
        <div ng-class="getCSSClass()">Testing ng-class using function</div>       
    </div>
</div>

CSS:

.testclass { Background: lightBlue}

JavaScript :

function testCtrl($scope) {
    $scope.getCSSClass = function() {
     return "testclass ";
  }     
}

utilisez ceci

<div ng-class="{states}[condition]"></div>

par exemple, si la condition est [2 == 2], les états sont {true: '...', false: '...'}

<div ng-class="{true: 'ClassA', false: 'ClassB'}[condition]"></div>

Pour Angular 2, utilisez ceci

<div [ngClass]="{'active': dashboardComponent.selected_menu == 'mapview'}">Content</div>

ng-classest une directive des AngularJ de base. Dans lequel vous pouvez utiliser "String Syntax", "Array Syntax", "Evaluated Expression", "Ternary Operator" et bien d'autres options décrites ci-dessous:

ngClass à l'aide de la syntaxe de chaîne

C'est la manière la plus simple d'utiliser ngClass. Vous pouvez simplement ajouter une variable angulaire à ng-class et c'est la classe qui sera utilisée pour cet élément.

<!-- whatever is typed into this input will be used as the class for the div below -->
<input type="text" ng-model="textType">

<!-- the class will be whatever is typed into the input box above -->
<div ng-class="textType">Look! I'm Words!

Exemple de démonstration de ngClass à l'aide de la syntaxe de chaîne

ngClass à l'aide de la syntaxe de tableau

Ceci est similaire à la méthode de syntaxe de chaîne, sauf que vous pouvez appliquer plusieurs classes.

<!-- both input boxes below will be classes for the div -->
<input type="text" ng-model="styleOne">
<input type="text" ng-model="styleTwo">

<!-- this div will take on both classes from above -->
<div ng-class="[styleOne, styleTwo]">Look! I'm Words!

ngClass utilisant l'expression évaluée

Une méthode plus avancée d'utilisation de ngClass (et celle que vous utiliserez probablement le plus) consiste à évaluer une expression. La façon dont cela fonctionne est que si une variable ou une expression est évaluée true, vous pouvez appliquer une certaine classe. Sinon, la classe ne sera pas appliquée.

<!-- input box to toggle a variable to true or false -->
<input type="checkbox" ng-model="awesome"> Are You Awesome?
<input type="checkbox" ng-model="giant"> Are You a Giant?

<!-- add the class 'text-success' if the variable 'awesome' is true -->
<div ng-class="{ 'text-success': awesome, 'text-large': giant }">

Exemple de ngClass utilisant l'expression évaluée

ngClass utilisant la valeur

Ceci est similaire à la méthode d'expression évaluée, sauf que vous pouvez simplement comparer plusieurs valeurs avec la seule variable.

<div ng-class="{value1:'class1', value2:'class2'}[condition]"></div>

ngClass à l'aide de l'opérateur ternaire

L'opérateur ternaire nous permet d'utiliser des raccourcis pour spécifier deux classes différentes, une si une expression est vraie et une pour faux. Voici la syntaxe de base de l'opérateur ternaire:

ng-class="$variableToEvaluate ? 'class-if-true' : 'class-if-false'">

Évaluation du premier, du dernier ou du numéro spécifique

Si vous utilisez la ngRepeatdirective et que vous souhaitez appliquer des classes au first, lastou un numéro spécifique dans la liste, vous pouvez utiliser les propriétés particulières de ngRepeat. Ceux - ci comprennent $first, $last, $even, $odd, et quelques autres. Voici un exemple d'utilisation.

<!-- add a class to the first item -->
<ul>
  <li ng-class="{ 'text-success': $first }" ng-repeat="item in items">{{ item.name }}</li>
</ul>

<!-- add a class to the last item -->
<ul>
  <li ng-class="{ 'text-danger': $last }" ng-repeat="item in items">{{ item.name }}</li>
</ul>

<!-- add a class to the even items and a different class to the odd items -->
<ul>
  <li ng-class="{ 'text-info': $even, 'text-danger': $odd }" ng-repeat="item in items">{{ item.name }}</li>
</ul>