Question AngularJS ngClass conditionnel


Est-il possible de faire une expression pour quelque chose comme ngClass pour ê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 quel que soit obj.value1, le test de classe est toujours appliqué à l'élément. Ce faisant:

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

Tant que obj.value2 ne correspond pas à une valeur de vérité, 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 fonction checkValue1 ressemble à ceci:

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

Je me demande simplement si c'est ainsi que ngClass est supposé fonctionner. Je construis aussi une directive sur mesure où j'aimerais faire quelque chose de similaire. 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:

http://plnkr.co/edit/iSh0t8swDEyGbh7ylZg2?p=preview


424
2018-05-13 19:38


origine


Réponses:


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

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

Voici une plnkr.

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

Pour compléter: vous pouvez également utiliser des opérateurs logiques pour former des expressions logiques telles que

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

519
2018-05-13 19:44



Utiliser 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 statut dans task.status, une classe différente est utilisée pour la ligne.


196
2017-07-28 23:46



Angulaire JS fournir cette fonctionnalité dans ng-class Directive. Dans lequel vous pouvez mettre condition et assigner également la 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 de code sera applicable en fonction de la valeur de statut valeur

si statut La valeur est 0 puis appliquer la classe un

si statut La valeur est 1 puis appliquer la classe deux

si statut La valeur est 2 puis appliquer la classe Trois


Type 2

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

Dans quelle classe sera appliquée la valeur de statut

si statut La valeur est 1 ou vrai alors il va ajouter la classe test_yes

si statut La valeur est 0 ou faux alors il va ajouter la classe test_no


89
2017-07-08 09:11



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

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

ou

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

Explication: Si le statut est actif, la classe enabled sera utilisé. Sinon, la classe disabled sera utilisé.

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


52
2017-12-08 08:54



Je vais vous montrer deux méthodes par lesquelles vous pouvez appliquer dynamiquement ng-class

Étape 1

En utilisant un opérateur ternaire

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

Sortie

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

Désavantage

Lorsque vous allez essayer de modifier la valeur conditionnelle au moment de l'exécution, la classe ne sera pas modifiée en quelque sorte. Donc, je vais vous suggérer d'aller à l'étape 2 si vous avez besoin d'un changement de classe dynamique.

Étape 2

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

Sortie

Si votre condition correspond à value1 alors class1 sera appliqué à votre élément, s'il correspond à value2 puis class2 sera appliqué et ainsi de suite. Et le changement de classe dynamique fonctionnera bien avec lui.

J'espère que ceci vous aidera.


30
2017-08-31 09:19



Il existe une méthode simple que vous pouvez utiliser avec l'attribut html class et sténographie 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>

Heureux codage, Nimantha Perera


28
2018-03-26 19:00



la syntaxe angulaire est d'utiliser le : opérateur pour effectuer l'équivalent d'un si modificateur

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

Ajouter la classe clearfix aux lignes paires. Néanmoins, l'expression pourrait être tout ce que nous pouvons avoir en condition normale et elle devrait être vraie ou fausse.


27
2018-06-30 01:43