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

Question

Je crée une liste en utilisant ng-repeat, comme ceci

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

Mais pour le dernier élément seulement, j'aimerais avoir une classe ( <div class="last">test</div> Comment puis-je réaliser cela en utilisant ng-repeat ?

Answer 1

Vous pouvez utiliser $last variable dans ng-repeat directive. Jetez un coup d'œil à doc .

Vous pouvez le faire comme ça :

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

Donde computeCssClass est fonction de controller qui prend un seul argument et retourne 'last' o null .

Ou

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

Answer 2

Il 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 site :last-of-type est actuellement pris en charge par 98 % des navigateurs.

Answer 3

Pour approfondir la réponse de Paul, il s'agit de 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 convient également de noter que vous devriez vraiment éviter cette solution si possible. Par nature, CSS peut gérer cela, ce qui rend une solution basée sur JS inutile et non performante. Malheureusement, si vous avez besoin de supporter IE8, cette solution ne fonctionnera pas pour vous ( voir les documents de support MDN ).

Solution CSS uniquement

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

Answer 4

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

Cela fonctionne pour moi ! Bonne chance !

Answer 5

Vous pourriez utiliser limitTo filtre avec -1 pour trouver le dernier élément

Exemple :

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