AngularJS How to append HTML after last ng-repeat

Question

I created a Load More Button using the instagram API to show media recent, but it always overlap the ng-repeat and will not append new line after last ng-repeat.

Any help would be much appreciated. Best Regards.

Answer 1

http://codepen.io/anon/pen/ZbEzNM?editors=101

You are overwritting your families everytime, so you need concat your new data.

Change this line:

$scope.families = response.data.data;

to:

$scope.families = $scope.families.concat(response.data.data);

EXTRA: If you want remove the button you can use this plugin ngInfiniteScroll

Answer 2

If I understand your question correctly (which could be worded more clearly), you're asking why clicking Load More doesn't append and keep the original data, increasing the size of the collection by 10 rows every time.

From what I can see, it's as simple as this line

$scope.families = response.data.data;

whereby you are reassigning the families to the response, overwriting the previous data.

Answer 3

or, just push:

function pushArray(arr1, arr2) {
        if (arr1 && arr2 && Array.isArray(arr1)) {
            arr1.push.apply(arr1, Array.isArray(arr2) ? arr2 : [arr2]);
        }
};

...

pushArray($scope.families,response.data.data);