AngularJS : comment rendre la directive ngClass conditionnelle ?
L'attribut ngClass accepte les conditions de 2 manières différentes. Elles doivent, dans tous les cas, retourner true ou false pour que le test soit valide.
Au sein d'AngularJS, la directive ngClass permet d'attribuer à un élément HTML une classe qui peut évoluer dynamiquement. L'attribut ngClass accepte les conditions de 2 manières différentes. Elles doivent, dans tous les cas, retourner true ou false pour que le test soit valide.
La première solution consiste à effectuer le test directement dans la valeur de l'attribut. Il faut écrire le texte entre accolades avec à l'intérieur la classe qui sera attribuée en cas de réussite, puis le caractère : et enfin la condition.
<span ng-class={'maClasse' : monObjet.attribut == 'test'}>Chaîne de caractère</span>
Dans cet exemple, la classe maClasse sera attribuée au span uniquement si la valeur de l'attribut attribut de l'objet monObjet est égale à test. Vous pouvez utiliser les opérateurs logiques dans les tests :
<span ng-class={'maClasse' : monObjet.attribut == 'test' || monObjet.attribut == 'test2'}>Chaîne de caractère</span>
La deuxième solution pour réaliser des tests plus compliqués est de développer une fonction dans le contrôleur qui effectuera les tests, puis de l'appeler dans l'attribut ngClass :
function SettingsController($scope) {
$scope.monObjet = {
attribut: 'test'
}
$scope.condition = function() {
return $scope.monObjet.attribut === 'test';
}
}
<span ng-class={test: condition()}>Chaîne de caractère</span>