Classe différente pour le dernier élément de ng-repeat

152

Je crée une liste en utilisant ng-repeat quelque chose comme ça

  <div ng-repeat="file in files">
   {{file.name}}
   </div>

Mais pour le dernier élément seulement, je voudrais avoir une classe ( <div class="last">test</div>) incluse. comment puis-je y parvenir en utilisant ng-repeat?

angularjs

— Rahul
source

était coincé sur le même depuis 2 heures :)

— Anshul

241

Vous pouvez utiliser une $lastvariable dans la ng-repeatdirective. Jetez un œil à doc .

Vous pouvez le faire comme ceci:

 <div ng-repeat="file in files" ng-class="computeCssClass($last)">
 {{file.name}}
 </div>

Où computeCssClassest la fonction controllerdont prend le seul argument et retourne 'last'ou null.

Ou

  <div ng-repeat="file in files" ng-class="{'last':$last}">
  {{file.name}}
  </div>

— Paul Brit
source

1

J'ai jeté un coup d'œil à cela plus tôt, mais je n'ai pas pu comprendre comment utiliser exactement $ last .. il n'y a pas beaucoup d'exemples non plus.

— Rahul

@Rahul, j'ai mis à jour la réponse. Comprenez-vous de quoi je parle?

— Paul Brit

8

oui .. J'ai aussi eu une autre réponse de google groups <div ng-repeat="file in files" ng-class="{last: $last}"> {{file.name}} </div>

— Rahul

1

@Rahul, je suppose que votre réponse est meilleure que la mienne.

— Paul Brit

@Rahul, en effet, malheureusement, cela fonctionne pour moi. Qu'avez-vous dans la console développeur?

— Paul Brit

23

C'est plus facile et plus propre de le faire avec CSS.

HTML:

<div ng-repeat="file in files" class="file">
  {{ file.name }}
</div>

CSS:

.file:last-of-type {
    color: #800;
}

Le :last-of-typesélecteur est actuellement pris en charge par 98% des navigateurs

— aidan
source

3

Solution pour AngularJS de manière CSS 👌

— Mo.

1

NB: Cela ne fonctionne pas lorsque ng-repeatest suivi de <div class="file"></div>, et que vous souhaitez mettre à part la liste des divs .file existants .

— DerMike

1

@DerMike Dans ce cas, vous mettriez une autre classe sur les ng-repeatéléments pour les différencier des derniersdiv

— aidan

14

Pour développer la réponse de Paul, c'est la logique du contrôleur qui coïncide avec le code du modèle.

// HTML
<div class="row" ng-repeat="thing in things">
  <div class="well" ng-class="isLast($last)">
      <p>Data-driven {{thing.name}}</p>
  </div>
</div>

// CSS
.last { /* Desired Styles */}

// Controller
$scope.isLast = function(check) {
    var cssClass = check ? 'last' : null;
    return cssClass;
};

Il est également intéressant de noter que vous devriez vraiment éviter cette solution si possible. Par nature, CSS peut gérer cela, créer une solution basée sur JS est inutile et non performante. Malheureusement, si vous devez prendre en charge IE8>, cette solution ne fonctionnera pas pour vous ( voir la documentation de support MDN ).

Solution CSS uniquement

// Using the above example syntax
.row:last-of-type { /* Desired Style */ }

— Épée Scott
source

Remarque: la solution CSS uniquement ne fonctionne pas si la classe .ng-hide est appliquée au dernier élément car: last-child ne se préoccupe pas de savoir si l'élément est rendu à l'écran ou non, mais s'il est littéralement le dernier élément dans l'ensemble dans le balisage. fiddle.jshell.net/p5qe82w4/4

— Kerry Johnson

7

<div ng-repeat="file in files" ng-class="!$last ? 'class-for-last' : 'other'">
   {{file.name}}
</div>

Ça marche pour moi! Bonne chance!

— Fabian Perez
source

Donc, si ce n'est pas $ last, il a une classe pour le dernier, et le dernier élément a une classe autre ...

— strwoc

2

Vous pouvez utiliser le limitTofiltre avec -1pour trouver le dernier élément

Exemple :

<div ng-repeat="friend in friends | limitTo: -1">
    {{friend.name}}
</div>

— Nourein
source

0

La réponse de Fabian Perez a fonctionné pour moi, avec un petit changement

Le HTML édité est ici:

<div ng-repeat="file in files" ng-class="!$last ? 'other' : 'class-for-last'"> {{file.name}} </div>

— T. Naik
source