Pouvons-nous avoir plusieurs expressions pour ajouter plusieurs classes ng?
par exemple.
<div ng-class="{class1: expressionData1, class2: expressionData2}"></div>
Si oui, quelqu'un peut-il donner l'exemple pour le faire.
.
Pouvons-nous avoir plusieurs expressions pour ajouter plusieurs classes ng?
par exemple.
<div ng-class="{class1: expressionData1, class2: expressionData2}"></div>
Si oui, quelqu'un peut-il donner l'exemple pour le faire.
.
Réponses:
Pour appliquer différentes classes lorsque différentes expressions évaluent true
:
<div ng-class="{class1 : expression1, class2 : expression2}">
Hello World!
</div>
Pour appliquer plusieurs classes lorsqu'une expression est vraie:
<!-- notice expression1 used twice -->
<div ng-class="{class1 : expression1, class2 : expression1}">
Hello World!
</div>
ou tout simplement:
<div ng-class="{'class1 class2' : expression1}">
Hello World!
</div>
Remarquez les guillemets simples entourant les classes CSS.
'class1 class2': expression
) semble fonctionner correctement, sauf que si vous réutilisez une classe, elle est supprimée lorsque l'expression bascule entre les options. Par exemple, avec 'commonClass class1': expression == true, 'commonClass class2': expression == false
commonClass est perdu lorsque l'expression bascule entre vrai et faux.
class="commonClass" ng-class={'class1' : expression, 'class2' : !expression}
ng-class="{'class1' : expression1, 'class2':expression1 }"
possible? Pourriez-vous regarder ma question: stackoverflow.com/questions/25391692/…
Pour la notation de l'opérateur ternaire:
<div ng-class="expression1? 'class1 class2' : 'class3 class4'">
ng-class="[expression1? 'class1 class2' : 'class3 class4', expression2 ? 'class5' : 'class6']"
Oui, vous pouvez avoir plusieurs expressions pour ajouter plusieurs classes dans ng-class.
Par exemple:
<div ng-class="{class1:Result.length==2,class2:Result.length==3}"> Dummy Data </div>
Une alternative incroyablement puissante aux autres réponses ici:
ng-class="[ { key: resulting-class-expression }[ key-matching-expression ], .. ]"
Quelques exemples:
1. Ajoute simplement «class1 class2 class3» à la div:
<div ng-class="[{true: 'class1'}[true], {true: 'class2 class3'}[true]]"></div>
2. Ajoute des classes "impaires" ou "paires" à div, en fonction de l'index $:
<div ng-class="[{0:'even', 1:'odd'}[ $index % 2]]"></div>
3. Crée dynamiquement une classe pour chaque div basée sur $ index
<div ng-class="[{true:'index'+$index}[true]]"></div>
Si $index=5
cela se traduit par:
<div class="index5"></div>
Voici un exemple de code que vous pouvez exécuter:
var app = angular.module('app', []);
app.controller('MyCtrl', function($scope){
$scope.items = 'abcdefg'.split('');
});
.odd { background-color: #eee; }
.even { background-color: #fff; }
.index5 {background-color: #0095ff; color: white; font-weight: bold; }
* { font-family: "Courier New", Courier, monospace; }
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.1/angular.min.js"></script>
<div ng-app="app" ng-controller="MyCtrl">
<div ng-repeat="item in items"
ng-class="[{true:'index'+$index}[true], {0:'even', 1:'odd'}[ $index % 2 ]]">
index {{$index}} = "{{item}}" ng-class="{{[{true:'index'+$index}[true], {0:'even', 1:'odd'}[ $index % 2 ]].join(' ')}}"
</div>
</div>
ng-class
directives plus complexes , comme lorsque j'avais besoin d'appliquer un ternaire et une expression standard sur le même élément. J'ai soumis une modification à la réponse acceptée pour inclure l'utilisation de tableaux d'expressions.
[{true:'index'+$index}[true], {0:'even', 1:'odd'}[ $index % 2 ]]
peut être simplifiée comme ça ['index'+$index, {0:'even', 1:'odd'}[ $index % 2 ]]
. Je viens de l'essayer dans Angular 1.5.9 et cela fonctionne :) Merci pour une excellente réponse!
En utilisant une $scope
méthode sur le contrôleur, vous pouvez calculer les classes à afficher dans la vue. C'est particulièrement pratique si vous avez une logique complexe pour calculer les noms de classe et cela réduira la quantité de logique dans votre vue en la déplaçant vers le contrôleur:
app.controller('myController', function($scope) {
$scope.className = function() {
var className = 'initClass';
if (condition1())
className += ' class1';
if (condition2())
className += ' class2';
return className;
};
});
et dans la vue, simplement:
<div ng-class="className()"></div>
className
?
ng-
liaisons HTML de déterminer quelle classe utiliser lorsque cette condition est remplie.
className
.
Votre exemple fonctionne pour les classes conditionnées (le nom de la classe indiquera si le expressionDataX
est vrai):
<div ng-class="{class1: expressionData1, class2: expressionData2}"></div>
Vous pouvez également ajouter plusieurs classes, fournies par l'utilisateur de l'élément:
<div ng-class="[class1, class2]"></div>
Usage:
<div class="foo bar" class1="foo" class2="bar"></div>
{}
et une classe liée aux données utilisant []
?
ngClass
directives sur un élément.
<a href="#/u/[[msg.from]]" ng-bind="msg.from" class="name, ng-class:[users[msg.from].nice, users[msg.from].star];" ng-class="{premium: users[msg.from].premium}"></a>
et plus encore: scotch.io/tutorials/javascript/the-many-ways-to-use-ngclass
Voici un exemple comparant plusieurs états de routeur angulaire-ui en utilisant le OR || opérateur:
<li ng-class="
{
warning:
$state.includes('out.pay.code.wrong')
|| $state.includes('out.pay.failed')
,
active:
$state.includes('out.pay')
}
">
Il donnera au li les classes d'avertissement et / ou actives, selon que les conditions sont remplies.
Sous active et activemenu se trouvent les classes et itemCount et ShowCart est l'expression / les valeurs booléennes.
ng-class="{'active' : itemCount, 'activemenu' : showCart}"
Trouvé autrement grâce à Scotch.io
<div ng-repeat="step in steps" class="step-container step" ng-class="[step.status, step.type]" ng-click="onClick(step.type)">
C'était ma référence.CHEMIN
Autre moyen, nous pouvons créer une fonction pour contrôler "en utilisant plusieurs classes"
CSS
<style>
.Red {
color: Red;
}
.Yellow {
color: Yellow;
}
.Blue {
color: Blue;
}
.Green {
color: Green;
}
.Gray {
color: Gray;
}
.b {
font-weight: bold;
}
</style>
Scénario
<script>
angular.module('myapp', [])
.controller('ExampleController', ['$scope', function ($scope) {
$scope.MyColors = ['It is Red', 'It is Yellow', 'It is Blue', 'It is Green', 'It is Gray'];
$scope.getClass = function (strValue) {
if (strValue == ("It is Red"))
return "Red";
else if (strValue == ("It is Yellow"))
return "Yellow";
else if (strValue == ("It is Blue"))
return "Blue";
else if (strValue == ("It is Green"))
return "Green";
else if (strValue == ("It is Gray"))
return "Gray";
}
}]);
</script>
En l'utilisant
<body ng-app="myapp" ng-controller="ExampleController">
<h2>AngularJS ng-class if example</h2>
<ul >
<li ng-repeat="icolor in MyColors" >
<p ng-class="[getClass(icolor), 'b']">{{icolor}}</p>
</li>
</ul>
Vous pouvez vous référer à la page de code complète à ng-class si exemple