AngularJS ngClass conditionnel
Existe-t-il un moyen de faire une expression pour quelque chose comme ng-class être conditionnel?
Par exemple, j'ai essayé ce qui suit:
_<span ng-class="{test: 'obj.value1 == \'someothervalue\''}">test</span>
_Le problème avec ce code est que peu importe ce que _obj.value1_ est, le test de classe est toujours appliqué à l'élément. Ce faisant:
_<span ng-class="{test: obj.value2}">test</span>
_Tant que _obj.value2_ ne correspond pas à une valeur de vérité, la classe n'est pas appliquée. Maintenant, je peux contourner le problème dans le premier exemple en procédant comme suit:
_<span ng-class="{test: checkValue1()}">test</span>
_Où la fonction _checkValue1_ ressemble à ceci:
_$scope.checkValue1 = function() {
return $scope.obj.value === 'somevalue';
}
_Je me demande simplement si c'est ainsi que _ng-class_ est censé fonctionner. Je construis également une directive douanière où je voudrais faire quelque chose de similaire à ceci. Cependant, je ne peux pas trouver un moyen de regarder une expression (et c'est peut-être impossible et la raison pour laquelle cela fonctionne comme ça).
Voici un plnkr pour montrer ce que je veux dire.
Votre première tentative était presque correcte, cela devrait fonctionner sans les guillemets.
{test: obj.value1 == 'someothervalue'}
Voici un plnkr .
La directive ngClass fonctionnera avec toutes les expressions évaluant la vérité ou Falsey, un peu similaires aux expressions Javascript, mais avec quelques différences, vous pouvez lire à propos de ici . Si votre conditionnel est trop complexe, vous pouvez utiliser une fonction qui renvoie la vérité ou Falsey, comme vous l'avez fait lors de votre troisième tentative.
Pour compléter, vous pouvez également utiliser des opérateurs logiques pour former des expressions logiques telles que
ng-class="{'test': obj.value1 == 'someothervalue' || obj.value2 == 'somethingelse'}"
Utiliser ng-class dans ng-repeat
<table>
<tbody>
<tr ng-repeat="task in todos"
ng-class="{'warning': task.status == 'Hold' , 'success': task.status == 'Completed',
'active': task.status == 'Started', 'danger': task.status == 'Pending' } ">
<td>{{$index + 1}}</td>
<td>{{task.name}}</td>
<td>{{task.date|date:'yyyy-MM-dd'}}</td>
<td>{{task.status}}</td>
</tr>
</tbody>
</table>
Pour chaque statut dans task.status, une classe différente est utilisée pour la ligne.
JS angulaire fournit cette fonctionnalité en directive de classe ng. Dans lequel vous pouvez mettre une condition et également affecter une classe conditionnelle. Vous pouvez y parvenir de deux manières différentes.
Type 1
<div ng-class="{0:'one', 1:'two',2:'three'}[status]"></div>
Dans ce code la classe sera appliquée en fonction de la valeur de status value
si le statut la valeur est 0 , puis appliquez la classe un
si le statut la valeur est 1 , puis appliquez la classe deux
si le statut la valeur est 2 , puis appliquez la classe trois
Type 2
<div ng-class="{1:'test_yes', 0:'test_no'}[status]"></div>
Dans quelle classe sera appliqué par la valeur de status
si status la valeur est 1 ou true , la classe test_yes
si statut la valeur est 0 ou faux , la classe test_no
Je vois d’excellents exemples ci-dessus, mais ils commencent tous par des accolades (json map). Une autre option consiste à renvoyer un résultat basé sur un calcul. Le résultat peut également être une liste de noms de classes css (pas seulement map). Exemple:
ng-class="(status=='active') ? 'enabled' : 'disabled'"
ou
ng-class="(status=='active') ? ['enabled'] : ['disabled', 'alik']"
Explication: Si le statut est actif, la classe enabled sera utilisée. Sinon, la classe disabled sera utilisée.
La liste [] est utilisée pour utiliser plusieurs classes (pas une seule).
Il existe une méthode simple que vous pouvez utiliser avec l'attribut de classe html et en abrégé si/else. Pas besoin de le rendre si complexe. Il suffit d'utiliser la méthode suivante.
<div class="{{expression == true ? 'class_if_expression_true' : 'class_if_expression_false' }}">Your Content</div>
Codage heureux, Nimantha Perera
La syntaxe angulaire consiste à utiliser l'opérateur : pour effectuer l'équivalent d'un modificateur if
<div ng-class="{ 'clearfix' : (row % 2) == 0 }">
Ajoutez la classe clearfix aux lignes paires. Néanmoins, l'expression peut être tout ce que nous pouvons avoir dans une condition normale et doit être évaluée comme étant vraie ou fausse.
Je vais vous montrer deux méthodes par lesquelles vous pouvez appliquer dynamiquement ng-class
Étape 1
En utilisant l'opérateur ternaire
<div ng-class="condition?'class1':'class2'"></div>
Sortie
Si votre condition est vraie, alors class1 sera appliqué à votre élément, sinon class2 sera appliqué.
Désavantage
Lorsque vous essayez de modifier la valeur conditionnelle au moment de l'exécution, la classe ne change pas. Je vais donc vous suggérer d’utiliser step2 si vous avez des exigences telles que le changement de classe dynamique.
Étape 2
<div ng-class="{value1:'class1', value2:'class2'}[condition]"></div>
Sortie
si votre condition correspond à valeur1, alors classe1 sera appliquée à votre élément. Si elle correspond à valeur2, classe2 sera appliquée, etc. Et le changement de classe dynamique fonctionnera bien avec cela.
J'espère que cela vous aidera.
Utiliser function avec ng-class est une bonne option lorsque quelqu'un doit exécuter une logique complexe pour choisir la classe CSS appropriée.
http://jsfiddle.net/ms403Ly8/2/
HTML:
<div ng-app>
<div ng-controller="testCtrl">
<div ng-class="getCSSClass()">Testing ng-class using function</div>
</div>
</div>
CSS:
.testclass { Background: lightBlue}
JavaScript :
function testCtrl($scope) {
$scope.getCSSClass = function() {
return "testclass ";
}
}
utilisez ceci
<div ng-class="{states}[condition]"></div>
par exemple, si la condition est [2 == 2], les états sont {true: '...', false: '...'}
<div ng-class="{true: 'ClassA', false: 'ClassB'}[condition]"></div>
Pour Angular 2, utilisez ceci
<div [ngClass]="{'active': dashboardComponent.selected_menu == 'mapview'}">Content</div>
ng-class est une directive de base AngularJs. Dans lequel vous pouvez utiliser "Syntaxe de chaîne", "Syntaxe de matrice", "Expression évaluée", "Opérateur ternaire" et bien d'autres options décrites ci-dessous:
ngClass utilisant la syntaxe de chaîne
C'est le moyen le plus simple d'utiliser ngClass. Vous pouvez simplement ajouter une variable Angular à ng-class et c'est la classe qui sera utilisée pour cet élément.
<!-- whatever is typed into this input will be used as the class for the div below -->
<input type="text" ng-model="textType">
<!-- the class will be whatever is typed into the input box above -->
<div ng-class="textType">Look! I'm Words!
Exemple de démonstration de ngClass utilisant la syntaxe de chaîne
ngClass utilisant la syntaxe de tableau
Ceci est similaire à la méthode de la syntaxe de chaîne, sauf que vous pouvez appliquer plusieurs classes.
<!-- both input boxes below will be classes for the div -->
<input type="text" ng-model="styleOne">
<input type="text" ng-model="styleTwo">
<!-- this div will take on both classes from above -->
<div ng-class="[styleOne, styleTwo]">Look! I'm Words!
ngClass utilisant une expression évaluée
Une méthode plus avancée d’utilisation de ngClass (et que vous utiliserez probablement le plus souvent) consiste à évaluer une expression. Cela fonctionne comme suit: si une variable ou une expression est évaluée à true, vous pouvez appliquer une classe donnée. Sinon, la classe ne sera pas appliquée.
<!-- input box to toggle a variable to true or false -->
<input type="checkbox" ng-model="awesome"> Are You Awesome?
<input type="checkbox" ng-model="giant"> Are You a Giant?
<!-- add the class 'text-success' if the variable 'awesome' is true -->
<div ng-class="{ 'text-success': awesome, 'text-large': giant }">
Exemple de ngClass utilisant l'expression évaluée
ngClass Utilisation de la valeur
Ceci est similaire à la méthode d'expression évaluée, sauf que vous ne pouvez que comparer plusieurs valeurs avec la seule variable.
<div ng-class="{value1:'class1', value2:'class2'}[condition]"></div>
ngClass Utilisation de l'opérateur ternaire
L'opérateur ternaire nous permet d'utiliser un raccourci pour spécifier deux classes différentes, une si une expression est vraie et l'autre pour faux. Voici la syntaxe de base pour l'opérateur ternaire:
ng-class="$variableToEvaluate ? 'class-if-true' : 'class-if-false'">
Évaluation du premier, du dernier ou du nombre spécifique
Si vous utilisez la directive ngRepeat et que vous souhaitez appliquer des classes à first, last ou à un numéro spécifique de la liste, vous pouvez utiliser les propriétés spéciales de ngRepeat . Ceux-ci incluent $first, $last, $even, $odd et quelques autres. Voici un exemple d'utilisation.
<!-- add a class to the first item -->
<ul>
<li ng-class="{ 'text-success': $first }" ng-repeat="item in items">{{ item.name }}</li>
</ul>
<!-- add a class to the last item -->
<ul>
<li ng-class="{ 'text-danger': $last }" ng-repeat="item in items">{{ item.name }}</li>
</ul>
<!-- add a class to the even items and a different class to the odd items -->
<ul>
<li ng-class="{ 'text-info': $even, 'text-danger': $odd }" ng-repeat="item in items">{{ item.name }}</li>
</ul>