web-dev-qa-db-fra.com

AngularJS - Comment ajouter plusieurs directives de classe ng?

Voici 2 façons différentes d'utiliser le ng-class directive. J'ai besoin des deux, sur le même élément, mais ça ne marche pas.

Utiliser un objet dans la classe ng

http://plnkr.co/edit/uZNK7I?p=preview

<div ng-repeat="item in [1, 2, 3, 4, 5]" 
     ng-class="{ first: $first, last: $last }">{{item}}</div>

entraîne correctement

<div class="first">1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div class="last">5</div>

Utiliser une expression dans ng-class

http://plnkr.co/edit/tp6lgR?p=preview

<div ng-repeat="item in [1, 2, 3, 4, 5]" 
     ng-class=" 'count-' + ($index + 1) ">{{item}}</div>

entraîne correctement

<div class="count-1">1</div>
<div class="count-2">2</div>
<div class="count-3">3</div>
<div class="count-4">4</div>
<div class="count-5">5</div>

Maintenant, que diriez-vous de les utiliser ensemble?

J'ai besoin de noms de classe dynamiques (comme 'count-' + n), mais nécessite également la syntaxe d'objet pour plusieurs classes.

Je ne peux pas simplement utiliser 2 ng-class attributs ( http://plnkr.co/edit/OLaYke?p=preview ), seul le premier fonctionne.

Des suggestions?

javascriptangularjsng-class
20
Michael Lewis

Vous ne devriez pas utiliser ng-class pour le second, utilisez

<div class="count-{{$index + 1}}" ng-class="{ first: $first, last: $last }">
20
tymeJV

Vous devez fournir à ngClass un tableau contenant à la fois l'expression et l'objet:

<div ng-class="['count-' + ($index + 1), { first: $first, last: $last }]">

Remarque: La solution proposée dans la réponse acceptée (utilisation simultanée de la directive ngClass et interpolation dans class attribute) est une mauvaise pratique. Voir plus de détails ici et ici .

7
Maxim Kulikov

Si vous devez les mélanger ensemble, optez simplement pour les chaînes de caractères:

ng-class="'count-' + ($index+1) + ($first?' first':($last?' last':''))"

Ou pour une vue plus claire:

ng-class="'count-' + ($index+1) + ($first?' first':'') + ($last?' last':'')"

Il n'y a pas d'avantages connus pour utiliser class="{{exp}}" au lieu de ng-class="exp", car les deux sont mis à jour lorsque la valeur de exp change. Au contraire, aller avec le premier pourrait entraîner un gel de la page dans certains cas.

2
Lucia

Je pense que vous pouvez séparer les attributs ng-class avec ;

essayer:

ng-class=" 'count-' + ($index + 1) ; { first: $first, last: $last }"
0
Pedro Araújo