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

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?

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>

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

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 */ }

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

Ça marche pour moi! Bonne chance!

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

Exemple :

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

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>