Classe diversa per l'ultimo elemento in ng-repeat

152

Sto creando un elenco usando ng-repeat qualcosa del genere

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

Ma solo per l'ultimo elemento vorrei <div class="last">test</div>includere una classe ( ). come posso ottenere questo usando ng-repeat?

angularjs

— Rahul
fonte

è stato bloccato sullo stesso nelle ultime 2 ore :)

— Anshul l'

241

Puoi usare la $lastvariabile all'interno della ng-repeatdirettiva. Dai un'occhiata a doc .

Puoi farlo in questo modo:

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

Dove computeCssClassè la funzione di controllercui prende solo argomento e restituisce 'last'o null.

O

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

— Paul Brit
fonte

1

ho dato un'occhiata prima ma non sono riuscito a capire esattamente come usare $ last .. non ci sono molti esempi là fuori.

— Rahul,

@Rahul, ho aggiornato la risposta. Capisci di cosa sto parlando?

— Paul Brit,

8

Sì. Ho anche ricevuto un'altra risposta da Google Gruppi <div ng-repeat="file in files" ng-class="{last: $last}"> {{file.name}} </div>

— Rahul,

1

@Rahul, immagino, la tua risposta è migliore della mia.

— Paul Brit,

@Rahul, anzi, purtroppo, funziona per me. Che cosa hai nella console per gli sviluppatori?

— Paul Brit,

23

È più facile e pulito farlo con i CSS.

HTML:

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

CSS:

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

Il :last-of-typeselettore è attualmente supportato dal 98% dei browser

— Aidan
fonte

3

Soluzione per AngularJS in modo CSS

— Mo

1

NB: Questo non funziona quando ng-repeatviene seguito da <div class="file"></div>e si desidera separare l'elenco di div .file esistenti .

— DerMike,

1

@DerMike In quel caso avresti messo un'altra classe sugli ng-repeatelementi per differenziarli dal finalediv

— aidan,

14

Per elaborare la risposta di Paul, questa è la logica del controller che coincide con il codice del modello.

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

Vale anche la pena notare che dovresti davvero evitare questa soluzione, se possibile. Per sua natura, i CSS possono gestirlo, rendendo superflua e non performante una soluzione basata su JS. Sfortunatamente se devi supportare IE8> questa soluzione non funzionerà per te ( vedi i documenti di supporto MDN ).

Soluzione solo CSS

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

— Scott Sword
fonte

Nota: la soluzione solo CSS non funziona se la classe .ng-hide viene applicata sull'ultimo elemento come: last-child non si preoccupa se l'elemento viene visualizzato sullo schermo o meno, ma se è letteralmente l'ultimo elemento all'interno dell'insieme nel 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>

Per me va bene! In bocca al lupo!

— Fabian Perez
fonte

Quindi se non è $ last, ha una classe per ultimo e l'ultimo elemento ha classe altro ...

— strwoc,

2

È possibile utilizzare il limitTofiltro con -1per trovare l'ultimo elemento

Esempio :

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

— Nourein
fonte

0

La risposta data da Fabian Perez ha funzionato per me, con un piccolo cambiamento

HTML modificato è qui:

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

— T. Naik
fonte