Clase diferente para el último elemento en ng-repeat

152

Estoy creando una lista usando ng-repeat algo como esto

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

Pero solo para el último elemento, me gustaría <div class="last">test</div>incluir una clase ( ). ¿Cómo puedo lograr esto usando ng-repeat?

angularjs

— Rahul
fuente

estaba atrapado en lo mismo de las últimas 2 horas :)

— Anshul

241

Puede usar $lastvariable dentro de la ng-repeatdirectiva. Echa un vistazo a doc .

Puedes hacerlo así:

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

Donde computeCssClasses función de lo controllerque toma argumento único y devuelve 'last'o null.

O

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

— Paul Brit
fuente

1

He echado un vistazo a eso antes, pero no pude averiguar cómo usar exactamente $ last ... tampoco hay muchos ejemplos.

— Rahul

@Rahul, he actualizado la respuesta. ¿Entiendes de lo que estoy hablando?

— Paul Brit

8

sí .. También recibí otra respuesta de los grupos de Google <div ng-repeat="file in files" ng-class="{last: $last}"> {{file.name}} </div>

— Rahul

1

@Rahul, supongo, tu respuesta es mejor que la mía.

— Paul Brit el

@Rahul, lamentablemente, funciona para mí. ¿Qué tienes en la consola de desarrollador?

— Paul Brit el

23

Es más fácil y limpio hacerlo con CSS.

HTML:

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

CSS:

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

El :last-of-typeselector actualmente es compatible con el 98% de los navegadores

— aidan
fuente

3

Solución para AngularJS en forma CSS 👌

— Mo.

1

NB: Esto no funciona cuando ng-repeates seguido por <div class="file"></div>, y le gustaría separar la lista de archivos .file existentes .

— DerMike

1

@DerMike En ese caso, pondrías otra clase en los ng-repeatelementos para diferenciarlos del finaldiv

— aidan

14

Para explicar la respuesta de Paul, esta es la lógica del controlador que coincide con el código de la plantilla.

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

También vale la pena señalar que realmente debería evitar esta solución si es posible. Por naturaleza, CSS puede manejar esto, hacer que una solución basada en JS sea innecesaria y no tenga un buen rendimiento. Desafortunadamente, si necesita admitir IE8> esta solución no funcionará para usted ( consulte los documentos de soporte de MDN ).

Solución solo para CSS

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

— Scott Sword
fuente

Nota: la solución solo CSS no funciona si la clase .ng-hide se aplica en el último elemento como: last-child no se preocupa por si el elemento se representa en la pantalla o no, sino si es literalmente el último elemento dentro del conjunto en el marcado. fiddle.jshell.net/p5qe82w4/4

— Kerry Johnson

7

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

¡Funciona para mi! ¡Buena suerte!

— Fabian Perez
fuente

Entonces, si no es $ last, tiene una clase para el último, y el último elemento tiene otra clase ...

— strwoc

2

Puede usar limitTofilter con -1para encontrar el último elemento

Ejemplo :

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

— Nourein
fuente

0

La respuesta dada por Fabián Pérez funcionó para mí, con un pequeño cambio.

El html editado está aquí:

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

— T. Naik
fuente