Inna klasa dla ostatniego elementu w ng-repeat

Tworzę listę używając ng-powtórzyć coś takiego

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

Ale jeśli chodzi o ostatni element, chciałbym, aby zawierał on klasę ( <div class="last">test</div>). jak mogę to osiągnąć używając ng-repeat?

Możesz użyć $lastzmiennej wewnątrz ng-repeatdyrektywy. Spójrz na doc .

Możesz to zrobić w ten sposób:

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

Gdzie computeCssClassjest funkcja, controllerktóra przyjmuje jedyny argument i zwraca 'last'lub null.

Lub

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

Jest to łatwiejsze i czystsze dzięki CSS.

HTML:

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

CSS:

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

:last-of-typeSelektor jest obecnie obsługiwana przez 98% przeglądarek

Aby rozwinąć odpowiedź Paula, jest to logika kontrolera, która pokrywa się z kodem szablonu.

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

Warto również zauważyć, że naprawdę powinieneś unikać tego rozwiązania, jeśli to możliwe. Z natury CSS może sobie z tym poradzić, więc tworzenie rozwiązania opartego na JS jest niepotrzebne i niewydajne. Niestety, jeśli potrzebujesz obsługi IE8> to rozwiązanie nie zadziała ( zobacz dokumentację pomocy technicznej MDN ).

Rozwiązanie tylko CSS

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

To działa dla mnie! Powodzenia!

Możesz użyć limitTofiltra -1do znalezienia ostatniego elementu

Przykład :

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

Odpowiedź udzielona przez Fabiana Pereza zadziałała dla mnie, z niewielką zmianą

Edytowany html jest tutaj:

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