Classe diferente para o último elemento em ng-repeat

152

Estou criando uma lista usando ng-repeat algo como isto

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

Mas apenas para o último elemento, gostaria de incluir uma classe ( <div class="last">test</div>). como posso conseguir isso usando ng-repeat?

angularjs

— Rahul
fonte

foi preso na mesma do último duas horas :)

— Anshul

241

Você pode usar $lastvariável dentro da ng-repeatdiretiva. Dê uma olhada no doc .

Você pode fazer assim:

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

Onde computeCssClassé a função da controllerqual recebe argumento único e retorna 'last'ou null.

Ou

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

— Paul Brit
fonte

1

Eu dei uma olhada nisso antes, mas não consegui descobrir exatamente como usar $ last ... também não existem muitos exemplos por aí.

— Rahul 29/01

@Rahul, eu atualizei a resposta. Você entende do que estou falando?

— Paul Brit

8

sim .. Eu também tenho outra resposta do Google Groups <div ng-repeat="file in files" ng-class="{last: $last}"> {{file.name}} </div>

— Rahul

1

@Rahul, eu acho, sua resposta é melhor que a minha.

— Paul Brit

@Rahul, na verdade, infelizmente, funciona para mim. O que você tem no console do desenvolvedor?

— Paul Brit

23

É mais fácil e limpo fazê-lo com CSS.

HTML:

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

CSS:

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

O :last-of-typeselector é suportado por 98% de navegadores

— aidan
fonte

3

Solução para AngularJS no modo CSS

— Mo

1

NB: Isso não funciona quando ng-repeaté seguido por <div class="file"></div>, e você gostaria de separar a lista de divs .file existentes .

— DerMike 30/09/16

1

@DerMike Nesse caso, você iria colocar outra classe sobre os ng-repeatelementos para diferenciá-los a partir da fugadiv

— Aidan

14

Para elaborar a resposta de Paulo, esta é a lógica do controlador que coincide com o código do modelo.

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

Também é importante notar que você realmente deve evitar esta solução, se possível. Por natureza, o CSS pode lidar com isso, criar uma solução baseada em JS é desnecessário e não tem desempenho. Infelizmente, se você precisar oferecer suporte ao IE8>, esta solução não funcionará para você ( consulte os documentos de suporte do MDN ).

Solução somente CSS

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

— Scott Sword
fonte

Nota: A solução somente CSS não funciona se a classe .ng-hide for aplicada no último elemento, pois: last-child não se preocupa se o elemento é renderizado na tela ou não, mas se é literalmente o último elemento dentro do conjunto na marcação. fiddle.jshell.net/p5qe82w4/4

— Kerry Johnson

7

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

Isso funciona para mim! Boa sorte!

— Fabian Perez
fonte

Então, se não é $ passado, ele tem uma classe para última, eo último elemento tem outra classe ...

— strwoc

2

Você pode usar o limitTofiltro com -1para encontrar o último elemento

Exemplo :

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

— Nourein
fonte

0

A resposta de Fabian Perez funcionou para mim, com uma pequena mudança

O html editado está aqui:

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

— T. Naik
fonte