Angularjs ui-utils ui-scroll how to use

Question

I am not exactly sure how to use ui-scroll. I have created a plunker but I don't think it works correctly because it is not adding or remove items from the DOM as you scroll. It displays them all!

My Plunker for ui-scroll

 MyApp.controller('MyAppCtrl', function($scope) {
    $scope.myData = {
      get : function(index, count, success) {
    var result = [{"guid":"8544a1c7-d637-42ae-836a-8a71901b44ca"},{"guid":"aff1450c-b4dd-4aa0-9b12-ea097e72c6fa"},{"guid":"a1c68796-7a28-4721-904a-4944234e253e"},{"guid":"8b7d881f-20ea-4b6c-a8d6-772e1236e6bf"},{"guid":"398c50a7-885e-4455-b741-66ebc2a64060"},{"guid":"81557a60-60b5-425a-9839-cf1da7e21bde"},{"guid":"ed48be4e-5963-47a1-b872-2bf20bec5da3"},{"guid":"15d9fa95-f824-4bd9-8b75-afb8dec99f03"},{"guid":"eaf2e5aa-24a4-4995-82d5-e661efc64556"}];

      index = 1;
      count = 10;

        success(result);
      }
    };
});

I looked at several examples on Github but most of the code is in coffee script and it's only adding items in a loop to the DOM. My question is how do you add items if you already have the data correctly. Do I still have iterate through the data set?

Your help is much appreciated.

Answer 1

UI-Scroll leaves it up to you to on what result to pass back to the success callback function based on an index and count. Something like this should work-

get: function(index, count, success){
        var result = [{"guid":"8544a1c7-d637-42ae-836a-8a71901b44ca"},{"guid":"aff1450c-b4dd-4aa0-9b12-ea097e72c6fa"},{"guid":"a1c68796-7a28-4721-904a-4944234e253e"},{"guid":"8b7d881f-20ea-4b6c-a8d6-772e1236e6bf"},{"guid":"398c50a7-885e-4455-b741-66ebc2a64060"},{"guid":"81557a60-60b5-425a-9839-cf1da7e21bde"},{"guid":"ed48be4e-5963-47a1-b872-2bf20bec5da3"},{"guid":"15d9fa95-f824-4bd9-8b75-afb8dec99f03"},{"guid":"eaf2e5aa-24a4-4995-82d5-e661efc64556"}];         
        success(result.slice(index-1, index-1 + count));
}

Be aware that the index you are passed is non-zero based so when you are working with an array you have to use an index that is zero-based (hence the index-1). Also, you may want to consider keeping the result outside of the get function and have your get function return a portion of the model you want to pass to UI-Scroll.