Ui-utils ui-scroll corner tools how to use

Question

I'm not quite sure how to use ui-scroll. I created a plunker, but I don’t think it works correctly, because it does not add or remove elements from the DOM as it scrolls. 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 a few examples on Github, but most of the code is in a coffee script, and it only adds elements in a loop in the DOM. My question is: how do you add items if you already have the data correctly. Do I still have iteration through a dataset?

Your help is greatly appreciated.

Answer 1

UI-Scroll reserves the right to which result to return to the success callback function based on index and counting. 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)); } 

Keep in mind that the index you specify is not zero, so when you are working with an array, you need to use an index based on a zero value (hence index-1). In addition, you may want to save the result outside the get function, and the get function returns the part of the model that you want to pass to the UI-Scroll.

Answer 2

zach makes sense, however, in order to handle not only the fourth, but also the scroll back index, you must do this before passing the index and consider it successful:

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

IE, the code shown 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)); }