Comment puis-je utiliser des expressions conditionnelles avec AngularJS ngClass ?

Expressions conditionnelles dans AngularJS ngClass

La directive AngularJS ngClass vous permet d'appliquer conditionnellement des classes CSS aux éléments HTML basés sur des expressions booléennes. Pour rendre une expression conditionnelle, vous pouvez utiliser la syntaxe suivante :

ng-class="{test: condition}"

Où condition est une expression JavaScript qui est évaluée comme vraie ou fausse.

Exemple :

Supposons que vous ayez un objet obj avec une propriété value1 définie sur « someothervalue ». Vous pouvez appliquer conditionnellement la classe CSS 'test' à un élément en utilisant l'expression ngClass suivante :

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

Si obj.value1 est égal à 'someothervalue', la classe 'test' sera appliquée à l'élément .

Expressions vraies et fausses :

La directive ngClass évalue les expressions comme valeurs « vraies » ou « fausses ». Une valeur véridique (par exemple, « vrai », « 1 », « oui ») appliquera la classe, tandis qu'une valeur fausse (par exemple, « faux », « 0 », « non ») n'appliquera pas la classe.

Expressions complexes :

Si votre logique conditionnelle devient trop complexe, vous pouvez utiliser une fonction qui renvoie une valeur véridique ou fausse.

Exemple :

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

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

Expressions logiques :

Vous pouvez également utiliser opérateurs logiques pour former des expressions logiques dans ngClass.

Exemple :

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

Cette expression appliquera la classe « test » si obj.value1 est égal à « someothervalue » ou si obj.value2 est égal à « autre chose ».

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!