Unterschiedliche Klasse für das letzte Element in ng-repeat

152

Ich erstelle eine Liste mit ng-repeat so etwas

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

Aber nur für das letzte Element hätte ich gerne eine class ( <div class="last">test</div>). Wie kann ich dies mit ng-repeat erreichen?

angularjs

— Rahul
quelle

war am selben von den letzten 2 Stunden

— festgefahren

241

Sie können $lastVariablen innerhalb der ng-repeatDirektive verwenden. Schauen Sie sich doc an .

Sie können es so machen:

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

Wo computeCssClassist die Funktion, controllerdie alleiniges Argument nimmt und 'last'oder zurückgibt null.

Oder

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

— Paul Brit
quelle

1

Ich habe mir das früher angesehen, konnte aber nicht herausfinden, wie genau $ last verwendet werden soll. Es gibt auch nicht viele Beispiele.

— Rahul

@ Rahul, ich habe die Antwort aktualisiert. Verstehst du, wovon ich rede?

— Paul Brit

8

Ja. Ich habe auch eine andere Antwort von Google Groups <div ng-repeat="file in files" ng-class="{last: $last}"> {{file.name}} </div>

— Rahul

1

@ Rahul, ich denke, deine Antwort ist besser als meine.

— Paul Brit

@ Rahul, leider funktioniert es bei mir. Was haben Sie in der Entwicklerkonsole?

— Paul Brit

23

Mit CSS ist es einfacher und sauberer.

HTML:

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

CSS:

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

Die :last-of-typeAuswahl wird derzeit von 98% der Browser unterstützt

— Aidan
quelle

3

Lösung für AngularJS auf CSS-Weise 👌

— Mo.

1

NB: Dies funktioniert nicht, wenn ng-repeatgefolgt wird <div class="file"></div>, und Sie möchten die Liste der vorhandenen .file- Divs trennen .

— DerMike

1

@DerMike In diesem Fall würden Sie eine andere Klasse auf die ng-repeatElemente setzen, um sie von den div

— nachfolgenden

14

Um auf Pauls Antwort einzugehen, ist dies die Controller-Logik, die mit dem Vorlagencode übereinstimmt.

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

Es ist auch erwähnenswert, dass Sie diese Lösung nach Möglichkeit wirklich vermeiden sollten. Von Natur aus kann CSS damit umgehen, sodass eine JS-basierte Lösung nicht erforderlich und nicht performant ist. Wenn Sie IE8 unterstützen müssen, funktioniert diese Lösung leider nicht für Sie ( siehe MDN-Supportdokumente ).

Nur-CSS-Lösung

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

— Scott Schwert
quelle

Hinweis: Die Nur-CSS-Lösung funktioniert nicht, wenn die Klasse .ng-hide auf das letzte Element angewendet wird, da: last-child sich nicht darum kümmert, ob das Element auf dem Bildschirm gerendert wird oder nicht, sondern ob es buchstäblich das letzte ist Element innerhalb des Satzes im Markup. fiddle.jshell.net/p5qe82w4/4

— Kerry Johnson

7

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

Das ist für mich in Ordnung! Viel Glück!

— Fabian Perez
quelle

Wenn es also nicht $ last ist, hat es eine Klasse für die letzte und das letzte Element hat eine andere Klasse ...

— strwoc

2

Sie können limitTofilter with verwenden, -1um das letzte Element zu finden

Beispiel :

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

— Nourein
quelle

0

Die Antwort von Fabian Perez hat mit einer kleinen Änderung für mich funktioniert

Bearbeitetes HTML ist hier:

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

— T. Naik
quelle