- Published on
How to Create Simple Show More Button in AngularJS
- Authors
- Name
- Ashik Nesin
- @AshikNesin
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;
});
};