How to Create Simple Show More Button in AngularJS

April 16, 2016

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;
  });
};

👋 I'm Ashik Nesin • Sr. Frontend Engineer @Chargebee 👨‍💻• I write about modern Javascript & building web apps

© 2021 Nesin Technologies LLP