AngularJS ngClass conditionnel

Existe-t-il un moyen de faire en sorte qu'une expression comme [ng-class][1] soit une condition ?

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 peu importe ce que obj.value1 est, le test de classe est toujours appliqué à l'élément. En faisant cela :

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

Tant que obj.value2 n'est pas égal à une valeur véridique, la classe n'est pas appliquée. Maintenant je peux contourner le problème du premier exemple en faisant ceci :

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

Où la fonction checkValue1 ressemble à ceci :

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

Je me demande juste si c'est comme ça que ng-class est censé fonctionner. Je suis également en train de construire une directive personnalisée dans laquelle j'aimerais faire quelque chose de similaire. Cependant, je ne trouve pas le moyen de surveiller une expression (et peut-être est-ce impossible et la raison pour laquelle cela fonctionne comme ça).

Voici une [plnkr][2] pour montrer ce que je veux dire.

[1] : https://docs.angularjs.org/api/ng/directive/ngClass [2] : http://plnkr.co/edit/iSh0t8swDEyGbh7ylZg2?p=preview

daaawx
Question modifiée 29 mars 2019 в 7:18
Programmation
html css angularjs
13 mai 2013 в 7:38
17 vues
Solution

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

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

Voici un plnkr.

La directive ngClass fonctionnera avec toute expression qui évalue vrai ou faux, un peu comme les expressions Javascript mais avec quelques différences, que vous pouvez lire ici. Si votre conditionnel est trop complexe, vous pouvez utiliser une fonction qui renvoie du vrai ou du faux, comme vous l'avez fait dans votre troisième tentative.

Juste pour compléter : Vous pouvez également utiliser les opérateurs logiques pour former des expressions logiques telles que

ng-class="{'test': obj.value1 == 'someothervalue' || obj.value2 == 'somethingelse'}"
Bertrand
Réponse modifiée 2 juillet 2015 в 1:17
Commentaires (5)

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

JakeGould
Réponse modifiée 5 avril 2016 в 2:52
Commentaires (2)

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

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

Ajouter la classe clearfix aux rangs pairs. Néanmoins, l'expression peut être tout ce que l'on peut avoir dans une condition if normale et elle doit être évaluée à true ou false.

Tristan
Réponse modifiée 13 août 2018 в 9:03
Commentaires (1)