AngularJS ngClass conditionnelle

Question

Est-il possible de faire une expression de quelque chose comme ngClass être conditionnelle. Par exemple, j'ai essayé le suivant:

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

Le problème avec ce code, c'est que n'importe quel obj.valeur1 est, la classe de test est toujours appliqué à l'élément. Pour ce faire:

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

Aussi longtemps que l'obj.valeur2 n'est pas égal à un truthy valeur, la classe de ne pas appliquée. Maintenant, je peux contourner le problème dans le premier exemple en faisant ceci:

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

où la checkValue1 fonction ressemble à ceci:

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

Je me demandais simplement si c'est de cette façon ngClass est censé fonctionner. Je suis également la construction d'une coutume directive dans le cas où je voudrais faire quelque chose de semblable à cela. Cependant, je ne peux pas trouver un moyen de regarder une expression (et peut-être que c'est impossible, et la raison pour laquelle il fonctionne comme ceci).

Voici une plnkr pour montrer ce que je veux dire:

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

Answer 1

Votre première tentative a été presque droit, Il devrait fonctionner sans les guillemets.

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

Voici une plnkr.

Le ngClass directive fonctionnera avec n'importe quelle expression qui correspond truthy ou falsey, un peu semblable à Javascript, des expressions, mais avec quelques différences, vous pouvez lire à ce sujet ici. Si votre condition est trop complexe, vous pouvez utiliser une fonction qui renvoie truthy ou falsey, comme vous l'avez fait dans votre troisième tentative.

Juste pour compléter: Vous pouvez également utiliser des opérateurs logiques de la forme logique des expressions comme

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

Answer 2

À l’aide de ng-classe à l’intérieur de ng-répétition

Pour chaque situation dans task.status une catégorie différente est utilisée pour la ligne.

Answer 3

angulaire syntaxe consiste à utiliser l’opérateur : pour effectuer l’équivalent d’un modificateur si

Ajouter clearfix classe aux lignes même. Néanmoins, expression pourrait être tout ce que nous pouvons avoir dans des conditions normales si condition et il doivent évaluer à true ou false.