Comment puis-je utiliser efficacement les expressions conditionnelles avec la directive ngClass d'AngularJS ?

Expressions conditionnelles dans la directive ngClass d'AngularJS

AngularJS fournit la directive ngClass pour ajouter et supprimer dynamiquement des classes CSS en fonction d'expressions données. Cependant, incorporer des expressions conditionnelles dans ngClass peut être délicat.

Exemples d'approches

Une tentative consiste à utiliser des expressions directement dans ngClass, telles que :

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

Cependant, cette expression applique toujours la classe "test" quelle que soit la valeur de obj.value1.

Pour Pour éviter cela, vous pouvez définir une fonction qui renvoie une valeur véridique ou fausse :

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

Ensuite, utilisez cette fonction dans ngClass :

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

Syntaxe correcte pour les expressions conditionnelles

Notez que lorsque vous utilisez des expressions conditionnelles directement dans ngClass, vous devez omettre les guillemets autour de l'expression. La syntaxe correcte est :

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

Expressions de direction et de surveillance personnalisées

Si vous créez des directives personnalisées qui nécessitent des expressions de surveillance, il est essentiel de comprendre qu'AngularJS le fait ne permet pas l’observation directe des expressions. Au lieu de cela, vous pouvez utiliser la méthode $watch pour observer les changements dans une valeur de modèle spécifique.

Fonctionnalités supplémentaires

ngClass prend en charge les opérateurs logiques, vous permettant de créer des expressions conditionnelles complexes. . Par exemple :

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

Cette expression applique la classe "test" si obj.value1 est égal à "someothervalue" ou si obj.value2 est égal à "somethingelse".

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!