J'essaie de faire 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;
}
En gros, si $scope.autoScroll
est vrai, je veux que la ng-class soit icon-autoscroll
et si elle est fausse, je veux qu'elle soit icon-autoscroll-disabled
.
Ce que j'ai maintenant ne fonctionne pas et produit l'erreur suivante dans la console
Erreur : Erreur Lexer : Caractère suivant inattendu aux colonnes 18-18 [ ?] dans l'expression [{(isAutoScroll()) ? 'icon-autoscroll' ; : 'icon-autoscroll-disabled'}].``.
Comment puis-je faire correctement cela ?
EDIT
solution 1 : (périmée)
<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 la Solution 3
, fournie par Stewie, devrait être celle utilisée. C'est la plus standard quand il s'agit d'opérateur ternaire (et pour moi la 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) ?//use class
'icon-autoscroll' ; ://else use
'icon-autoscroll-disabled'``
Comment utiliser le conditionnel dans les 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 (angular v.1.1.4+ a introduit la prise en charge de l'opérateur ternaire) :
<i ng-class="autoScroll ? 'icon-autoscroll' : 'icon-autoscroll-disabled'"></i>
[Plunker][1]
Comme solution alternative, basée sur l'opérateur logique javascript '&&' ; qui renvoie la dernière évaluation, vous pouvez aussi le faire comme suit :
<i ng-class="autoScroll && 'icon-autoscroll' || !autoScroll && 'icon-autoscroll-disabled'"></i>
C’est une syntaxe légèrement plus courte, mais plus facile à lire pour moi.
Ajouter 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 quand isNew=true