Inna klasa dla ostatniego elementu w ng-repeat

152

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?

angularjs

— Rahul
źródło

utknął na tym samym z ostatnich 2 godzin :)

— Anshul

241

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>

— Paul Brit
źródło

1

Patrzyłem na to wcześniej, ale nie mogłem dowiedzieć się, jak dokładnie użyć $ last .. nie ma też zbyt wielu przykładów.

— Rahul

@Rahul, zaktualizowałem odpowiedź. Czy rozumiesz, o czym mówię?

— Paul Brit

8

tak .. dostałem też inną odpowiedź z grup google <div ng-repeat="file in files" ng-class="{last: $last}"> {{file.name}} </div>

— Rahul

1

@Rahul, myślę, że twoja odpowiedź jest lepsza niż moja.

— Paul Brit,

@Rahul, rzeczywiście niestety, to działa dla mnie. Co masz w konsoli programisty?

— Paul Brit,

23

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

— Aidan
źródło

3

Rozwiązanie dla angularjs w CSS sposób 👌

— Mo.

1

Uwaga: to nie działa, gdy ng-repeatnastępuje po nim <div class="file"></div>i chcesz oddzielić listę istniejących elementów div .file .

— DerMike

1

@DerMike W takim przypadku należałoby umieścić inną klasę na ng-repeatelementach, aby odróżnić je od końcowychdiv

— aidan

14

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

— Scott Sword
źródło

Uwaga: rozwiązanie tylko CSS nie działa, jeśli klasa .ng-hide jest zastosowana na ostatnim elemencie, ponieważ: last-child nie przejmuje się tym, czy element jest renderowany na ekranie, czy nie, ale czy jest dosłownie ostatnim element w zestawie w znaczniku. fiddle.jshell.net/p5qe82w4/4

— Kerry Johnson

7

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

To działa dla mnie! Powodzenia!

— Fabian Perez
źródło

Więc jeśli nie jest to $ last, ma klasę na koniec, a ostatni element ma klasę other ...

— strwoc

2

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

Przykład :

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

— Nourein
źródło

0

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>

— T. Naik
źródło