J'essaie de basculer la classe d'un élément en utilisant ng-class
<button class="btn">
<i ng-class="{(isAutoScroll()) ? 'icon-autoscroll' : 'icon-autoscroll-disabled'}"></i>
</button>
isAutoScroll ():
$scope.isAutoScroll = function()
{
$scope.autoScroll = ($scope.autoScroll) ? false : true;
return $scope.autoScroll;
}
Fondamentalement, si $scope.autoScroll
est vrai, je veux que ng-class soit icon-autoscroll
et si c'est faux, je veux qu'il soit icon-autoscroll-disabled
Ce que j'ai maintenant ne fonctionne pas et produit cette erreur dans la console
Error: Lexer Error: Unexpected next character at columns 18-18 [?] in expression [{(isAutoScroll()) ? 'icon-autoscroll' : 'icon-autoscroll-disabled'}].
Comment puis-je faire cela correctement?
EDIT
solution 1: (obsolète)
<button class="btn" ng-click="autoScroll = !autoScroll">
<i ng-class="{'icon-autoscroll': autoScroll, 'icon-autoscroll-disabled': !autoScroll}"></i>
</button>
EDIT 2
solution 2:
Je voulais mettre à jour la solution car Solution 3
, fourni par Stewie, devrait être celui utilisé. C'est le plus standard quand il s'agit d'opérateur ternaire (et pour moi le plus facile à lire). La solution serait
<button class="btn" ng-click="autoScroll = !autoScroll">
<i ng-class="autoScroll ? 'icon-autoscroll' : 'icon-autoscroll-disabled'"></i>
</button>
se traduit par:
if (autoScroll == true) ?
// utilise la classe 'icon-autoscroll' :
// sinon utilise 'icon-autoscroll-disabled'
Comment utiliser conditionnel dans ng-class:
Solution 1:
<i ng-class="{'icon-autoscroll': autoScroll, 'icon-autoscroll-disabled': !autoScroll}"></i>
Solution 2:
<i ng-class="{true: 'icon-autoscroll', false: 'icon-autoscroll-disabled'}[autoScroll]"></i>
Solution 3 (v.1.1.4 angulaire + support introduit pour l'opérateur ternaire):
<i ng-class="autoScroll ? 'icon-autoscroll' : 'icon-autoscroll-disabled'"></i>
En tant que solution alternative, basée sur l'opérateur de logique javascript '&&' qui renvoie la dernière évaluation, vous pouvez également procéder comme suit:
<i ng-class="autoScroll && 'icon-autoscroll' || !autoScroll && 'icon-autoscroll-disabled'"></i>
C'est une syntaxe légèrement plus courte, mais pour moi plus facile à lire.
Ajoutez plus d'une classe en fonction de la condition:
<div ng-click="AbrirPopUp(s)"
ng-class="{'class1 class2 class3':!isNew,
'class1 class4': isNew}">{{ isNew }}</div>
Appliquer: class1 + class2 + class3 when isNew = false,
Appliquer: class1 + class4 when isNew = true
<div data-ng-init="featureClass=false"
data-ng-click="featureClass=!featureClass"
data-ng-class="{'active': featureClass}">
Click me to toggle my class!
</div>
Analogue à la méthode toggleClass
de jQuery, il s'agit d'un moyen d'activer/désactiver la classe active
lorsque l'on clique sur l'élément.
le défilement automatique sera défini et modifié dans le contrôleur.
<span ng-class= "autoscroll?'class_if_true':'class_if_false'"></span>
Ajouter plusieurs classes en fonction de la condition de:
<span ng-class= "autoscroll?'first second third':'classes_if_false'"></span>