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.

zach · Accepted Answer · 2014-11-04 20:14:43Z

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.

answered Nov 4, 2014 at 20:14

zach

3562 silver badges9 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Claude Over a year ago

Can you provide an example with dynamic data? plnkr.co/edit/HFOwnLsIJd84ayrwCVWq?p=preview

gadeshi · Accepted Answer · 2015-07-20 18:33:29Z

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));
}

Collectives™ on Stack Overflow

Angularjs ui-utils ui-scroll how to use

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related