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

Comprendre les instructions conditionnelles AngularJS ngClass

Dans AngularJS, la directive ngClass est souvent utilisée pour appliquer conditionnellement des classes CSS en fonction de l'évaluation d'un élément fourni. expression. Bien que cette fonctionnalité soit simple, il y a certaines nuances à prendre en compte.

Expressions conditionnelles dans ngClass

Pour créer une expression conditionnelle avec ngClass, utilisez simplement la syntaxe suivante :

<span ng-class="{test: <expression>}">test</span>

Cependant, il est important de noter que l'expression doit être évaluée à une valeur véridique ou fausse, sans avoir besoin de guillemets. Par conséquent, le code suivant ne fonctionnera pas :

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

À la place, utilisez ce qui suit :

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

Si l'expression est évaluée comme vraie, la classe de test sera appliquée à l'élément. Sinon, il ne sera pas appliqué.

Expressions complexes

Pour les conditions complexes qui ne peuvent pas être exprimées à l'aide d'une simple comparaison, vous pouvez utiliser une fonction qui renvoie une valeur véridique ou valeur falsey.

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

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

Directives personnalisées avec conditionnel Expressions

Vous pouvez également créer des directives personnalisées qui prennent en charge les expressions conditionnelles à l'aide des fonctions de restriction et de compilation.

myApp.directive('customConditional', function() {
  return {
    restrict: 'A',
    compile: function(tElement, tAttrs) {
      var expression = tAttrs.customConditional;
      return function postLink(scope, element) {
        scope.$watch(expression, function(newValue) {
          if (newValue) {
            element.addClass('my-class');
          } else {
            element.removeClass('my-class');
          }
        });
      };
    }
  };
});

Conclusion

Utilisation ngClass avec des expressions conditionnelles nécessite une compréhension de la façon dont les expressions sont évaluées dans AngularJS. En adoptant des valeurs véridiques et fausses et en utilisant des fonctions pour des conditions complexes, vous pouvez appliquer efficacement des classes CSS basées sur des critères dynamiques.

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!