angularjs - example - ng-repeat select

Clase diferente para el último elemento en ng-repeat

Question

Estoy creando una lista usando ng-repeat algo como esto

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

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

Answer 1

Es más fácil y más 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-type selector de :last-of-type es actualmente compatible con el 98% de los navegadores

Answer 2

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

Editado html está aquí:

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

Answer 3

Para elaborar en la respuesta de Pablo, 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, haciendo que una solución basada en JS sea innecesaria y no funcione. Desafortunadamente, si necesita admitir IE8>, esta solución no funcionará para usted ( consulte los documentos de soporte de MDN ).

Solución CSS-Only

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

Answer 4

Puede usar $last variable dentro ng-repeat directiva ng-repeat . Eche un vistazo a doc .

Puedes hacerlo así:

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

Donde computeCssClass es función del controller que toma el argumento único y devuelve ''last'' o null .

O

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

Answer 5

Puede usar limitTo filter con -1 para encontrar el último elemento

Ejemplo :

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

Answer 6

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

¡Funciona para mi! ¡Buena suerte!