StevieB StevieB - 4 months ago 14x
AngularJS Question

Angular hide first element in array in a ng-repeat without emptying array

Trying to do something like this

<md-card class="saved-search animated" ng-repeat="search in vm.savedSearches" md-theme="default" md-theme-watch>
<span class="md-title md-body-2">{{search.address[0]}}</span>
<span class="md-subhead">{{search.address | remainingAddress}}</span>

function remainingAddress() {
return remainingAddress;


function remainingAddress(input) {
let newArray = input;
return input ? newArray.shift().join(',') : input;

What I want to show first line of address as header which works, and the remaining part of the address on the next line. But the problem is with the remaining address and shift() it always returns empty array I guess because the multiple shift() clears out the array in the loop.


You can make use of limitTo filter alongside with the Array.join method:

<span class="md-title md-body-2">{{search.address[0]}}</span>
<span class="md-subhead">
    {{ (search.address | limitTo: -(search.address.length - 1)).join(',') }}

By passing a negative number -n to limitTo filter you're asking it to return the last n items of the array.

Reference: limitTo.