web-dev-qa-db-fra.com

ng-repeat affiche uniquement le dernier élément

Je développe une boîte de réception pour les messages avec AngularJs, et je suis tombé sur un problème: je veux afficher uniquement le dernier élément dans ng-repeat. J'ai fait quelques recherches et j'ai découvert que le code ci-dessous devrait fonctionner.

<div class="inbox" ng-repeat="recipient in messages">
  <ul>
    <div> 
      <span> {{recipient.$id}} <br> </span>
      <li class="inboxItem">
        <span ng-repeat="messages in recipient"> {{messages.sender}} {{messages.message}} <br></span>
      </li>
    </div>
  </ul>
</div>

Mais ce n'est pas le cas. Pouvez-vous me dire ce que je fais mal? Je pensais que array.length-1 devrait limiter ng-repeat pour n'afficher que le dernier objet d'un tableau.

Merci!

angularjsng-repeat
16
uksz

utiliser angularjs $last dans ng-repeat. voici le doc

<div ng-repeat="n in data track by $index">
   <span ng-show="$last">{{n}}</span>
</div>

<span ng-show="$last">{{n}}</span> lors de sa dernière répétition $last sera true sinon son false pour que vous puissiez utiliser ng-show ou ng-if avec $last.

voici un exemple de démo

[~ # ~] mise à jour [~ # ~] Je pense qu'il n'y a pas besoin de ng-repeat car vous devez montrer le dernier élément du tableau ( c'est la même chose que la réponse de @Michael P. Bazos), pour ce faire:

$scope.data = [42, 42, 43, 43, 50];

print the last value as : {{ data[data.length-1] }}

voici la démo

mais si vous avez vraiment besoin de faire avec ng-repeat faire comme ceci

[data[data.length-1]] crée un tableau uniquement avec le dernier élément.

<div ng-repeat="n in [data[data.length-1]] track by $index">
    <span>{{n}}</span>
</div>

démo

40
K.Toress

Vous pouvez utiliser le filtre limitTo avec -1

Exemple:

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

Voir violon

Mais si vous ne montrez qu'un seul élément, vous voulez peut-être vous débarrasser du ng-repeat...:

<div>
    {{friends[friends.length - 1].name}}
</div>
9
Michael P. Bazos

Quelque chose comme ça devrait fonctionner.

<div ng-repeat="something in vm.somethings">
  <span ng-show="$last">{{ something.value }}</span>
</div>
0
Pranav Singh