5

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.

dhilt
  • 18,707
  • 8
  • 70
  • 85
Claude
  • 417
  • 1
  • 8
  • 15

2 Answers2

2

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.

zach
  • 346
  • 2
  • 9
  • Can you provide an example with dynamic data? http://plnkr.co/edit/HFOwnLsIJd84ayrwCVWq?p=preview – Claude Nov 06 '14 at 20:46
0

zach has the point, however to treat not only a forth but a back scrolling index as well, you have to do this before passing index and count to success:

index = index <= 0 ? index + 1 : index -1;

I.E., the resulted code should look like this:

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 = index <= 0 ? index + 1 : index -1;
    success(result.slice(index, index + count));
}
gadeshi
  • 1
  • 1