AngularJS Performing 2 Types Of ng-click based on a Counter

Question

I have a $scope object that contains 50+ records. I have a <div> that displays the first 5 records in this $scope via a limitTo.

I have a button 'See More' that on each click displays the next 5 records.

However, once 50 records have been shown, i would like my button to call a function getMore() which, on its as it stands on its own, gets another 50 records.

HTML:

<div ng-repeat="data in myData | limitTo: Limit" >
    {{ data.name }}
</div>


<button ng-click="Limit = Limit + 5">
    See More
</button>

<button ng-click="getMore()">
    See More
</button>

JS:

app.controller("MyCtrl", function($scope) {

    $scope.Limit = 5;

    $scope.getMore = function () {
        // Call service to get more data
    };

});

How can i remove the need to have 2 buttons? But also, on call of getMore() once another max of 50 results have been returned (or 34 for example) reveal 5 at a time?

Thanks

I asume you increment limit each time? Cant you just say "if recordsLoaded <= limit them load more"? — Jens, Jul 17 '14 at 09:29
So... just use 'ng-click="getMore(5)"'... and in that function increment your limit, then based on what the limit is, load records if you require more... Although if I where you, I would just load data in the chunks needed (here 5 at a time)... — Jens, Jul 17 '14 at 10:19
@Jens - Just tried your advice above, but when inside my function, and trying to increment Limit via $scope.Limit = $scope.Limit + 5 i can see on the front-end {{Limit}} is not incrementing. — Oam Psy, Jul 17 '14 at 10:22
@Jens - my fault! I had placed the code to increment in my else clause! — Oam Psy, Jul 17 '14 at 10:25

Pak · Answer 1 · 2014-07-17T09:40:46.523

You're trying to implement infinite scrolling.

Here's my simple solution which implies pagination support on the back-end:

Coffeescript:

angular.module('yourApp.controllers').controller 'InfiniteCtrl',
 ['$resource', '$scope', 'DataResource',
  ($resource, $scope, DataResource) ->
    new class InfiniteCtrl
      constructor: () ->
        $scope.myData = []
        @counter = 0
        @loadMore()

      loadMore: () ->
        @counter += 1
        @DataResource.get({page:@counter}).$promise.then (data) ->
          $scope.myData = $scope.jobs.concat(data)
  ]

Compiled JS:

angular.module('yourApp.controllers').controller('InfiniteCtrl', [
  '$resource', '$scope', 'DataResource', function($resource, $scope, DataResource) {
    var InfiniteCtrl;
    return new (InfiniteCtrl = (function() {
      function InfiniteCtrl() {
        $scope.myData = [];
        this.counter = 0;
        this.loadMore();
      }

      InfiniteCtrl.prototype.loadMore = function() {
        this.counter += 1;
        return this.DataResource.get({
          page: this.counter
        }).$promise.then(function(data) {
          return $scope.myData = $scope.jobs.concat(data);
        });
      };

      return InfiniteCtrl;

    })());
  }
]);

You can adapt this solution to limit the amount of items you show.

In your template, showing more data can be done with :

<button ng-click="ctrl.loadMore()">More!</button>

Thanks for the solution, infinite scroll would be nice, however my requirement is on click of a button — Oam Psy, Jul 17 '14 at 09:35
This solution works with the click of a button (see my edit). — Pak, Jul 17 '14 at 09:41

AngularJS Performing 2 Types Of ng-click based on a Counter

1 Answers1