J'ai trouvé des problèmes lors de l'application de classes à l'intérieur de la table des éléments quand j'ai eu un cours déjà appliquée à l'ensemble de la table (par exemple, une couleur à appliquer à l'impair de lignes <myClass tbody tr:nth-child(even) td>). Il semble que lorsque vous inspectez l'élément avec les Outils de développement, l' element.style n'a pas de style affecté. Donc, au lieu d'utiliser ng-class, j'ai essayé à l'aide d' ng-style, et dans ce cas, le nouvel attribut CSS ne s'affiche à l'intérieur d' element.style. Ce code fonctionne très bien pour moi:
<tr ng-repeat="element in collection">
[...amazing code...]
<td ng-style="var === 0 && {'background-color': 'red'} ||
var === 1 && {'background-color': 'green'} ||
var === 2 && {'background-color': 'yellow'}">{{ var }}</td>
[...more amazing code...]
</tr>
Var est-ce que je suis de l'évaluation, et dans chaque cas, j'ai appliquer un style à chaque <td> selon var valeur, qui remplace l'actuel style appliqué par la classe CSS pour l'ensemble de la table.
Mise à JOUR
Si vous souhaitez appliquer une classe à la table par exemple, lorsque vous visitez une page ou dans d'autres cas, vous pouvez utiliser cette structure:
<li ng-class="{ active: isActive('/route_a') || isActive('/route_b')}">
Fondamentalement, ce que nous avons besoin d'activer un ng-classe est la classe à appliquer et un vrai ou fausse déclaration. Vrai s'applique à la classe et faux qui ne fonctionne pas. Nous avons donc ici deux vérifications de l'itinéraire de la page et un OU entre eux, donc si nous sommes en /route_a OU nous sommes en route_b, l' actif de la classe sera appliqué.
Cela fonctionne juste d'avoir une fonction logique, sur la droite qui renvoie true ou false.
Ainsi, dans le premier exemple, ng-style est conditionnée par trois états. Si elles sont toutes fausses, aucun style n'est appliqué, mais en suivant notre logique, au moins on va être appliqué, donc, la logique de l'expression va vérifier les variables comparaison est vraie et dans la mesure où un tableau vide est toujours vrai, qui va à gauche d'un tableau comme au retour et avec un seul vrai, compte tenu que nous sommes l'aide OU pour toute réponse, le style reste sera appliquée.
En passant, j'ai oublié de vous donner la fonction est actif():
$rootScope.isActive = function(viewLocation) {
return viewLocation === $location.path();
};
NOUVELLE MISE À JOUR
Ici, vous avez quelque chose que je trouve vraiment utile. Lorsque vous avez besoin d'appliquer une classe en fonction de la valeur d'une variable, par exemple, une icône en fonction du contenu de l' div, vous pouvez utiliser le code suivant (très utile en ng-repeat):
<i class="fa" ng-class="{ 'fa-github' : type === 0,
'fa-linkedin' : type === 1,
'fa-skype' : type === 2,
'fa-google' : type === 3 }"></i>
Icônes de Police Impressionnant
