Ng-repeat показывает только последний элемент

Я разрабатываю почтовый ящик для сообщений с помощью AngularJs, и я столкнулся с одной проблемой: я хочу показать только последний элемент внутри ng-repeat. Я сделал некоторые исследования и выяснил, что приведенный ниже код должен работать.

<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>

Однако это не так. Можете ли вы, ребята, сказать мне, что я делаю неправильно? Я думал, что array.length-1 должен ограничивать ng-repeat, чтобы показывать только последний объект в массиве.

Спасибо!

Ответы

Ответ 1

используйте angularjs $last в ng-repeat. здесь doc

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

<span ng-show="$last">{{n}}</span>, когда его последний повтор $last будет true иначе его false, чтобы вы могли использовать ng-show или ng-if с $last.

вот демонстрационная демонстрация

UPDATE Я думаю, что нет необходимости в ng-repeat, так как вам нужно показать последний элемент массива (это так же, как @Michael P. Bazos ответ), чтобы сделать это:

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

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

вот демонстрация

но если вам действительно нужно делать с ng-repeat, сделайте это

[data[data.length-1]] создать массив только с последним элементом.

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

демо

Ответ 2

Вы можете использовать фильтр limitTo с -1

Пример:

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

См. fiddle

Но если вы показываете только один элемент, возможно, вы хотите избавиться от ng-repeat...:

<div>
    {{friends[friends.length - 1].name}}
</div>

Ответ 3

Что-то вроде этого должно работать.

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