How to Create Simple Show More Button in AngularJS

In this quick post, we will see how to create a simple show more button in AngularJS.

In the page View

<div ng-repeat="item in products">
...
</div>

<div class="LoadMoreBtn" ng-click="LoadProducts();
"ng-show="showMoreBtn">Load more</div>

And in the container

var ajax = {};
ajax.products = function(paginationNo) {
    return $http({
        method: 'GET',
        url: 'http://example.com/api/products',
        data: 'pagination_no=' + paginationNo,
    }).then(function(response) {
        return response;
    });
};

$scope.LoadProducts = function() {
    ajax.products($scope.paginationNo).then(function(res) {
        $scope.products = (typeof $scope.products !== 'undefined') ? $scope.products.concat(res.data.results) : res.data.results;
        $scope.paginationNo = $scope.paginationNo + 1;
    });
}