Angular-ui ui-scroll - how to make it work when scrolling up?

Question

I'm using the angular-ui ui-scroll and it's great when I scroll down, keeps adding items as expected. However when I scroll up, it stops at the top of the last batch that I loaded. For example if I have 100 items and my buffer size is 10, and I've scrolled down so that items 61-70 are showing, when I scroll back up I want to see items 51-60. However I can't scroll up past item 61. I don't know what I'm doing wrong.

Here's the html:

<div row="row" ui-scroll="row in transactionSource" buffer-size="10" >{{row.data}}</sq-transaction>

Here's the script:

        $scope.transactionSource = {

        get: function (index, count, callback) {
            if (index < 0) {
                callback([])
           }
            else {
                var buffer = 10;
                var end = ctrl.nextIndex + buffer;
                if (end > ctrl.transactions.length) end = ctrl.transactions.length;
                var items = ctrl.transactions.slice(ctrl.nextIndex, end);
                ctrl.nextIndex = end;

                callback(items);
            }
       }
    };

If it's related, when I console.log the index and count values received, after the first load of 10 I get an index of -9 (in which case I return an empty array - if I don't do this, the entire array gets loaded). When I scroll up, I don't get a console.log message at all so it's like the 'get' only gets called when scrolling down.

Thanks in advance for any and all help.

Answer 1

Your datasource looks wrong. Items retrieving (slicing in your case) should be based on index and count parameters that you have from the datasource.get method arguments. I'd like to post an example of datasource implementation where the result items array is limited from 0 to 100 and should be sliced from some external data array:

get: function(index, count, success) {
    var result = [];
    var start = Math.max(0, index);
    var end = Math.min(index + count - 1, 100);
    if (start <= end) {
        result = externalDataArray.slice(start, end + 1);
    }
    success(result);
};

Hope it helps!