Angularjs ui-utils ui-scroll wie man verwendet

Question

Ich bin nicht genau sicher, wie man UI-Scroll verwendet. Ich habe einen Plunker erstellt, aber ich glaube nicht, dass er korrekt funktioniert, da beim Hinzufügen von Elementen keine Elemente aus dem DOM hinzugefügt oder entfernt werden. Es zeigt sie alle an!

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

ich an mehreren Beispielen auf Github sah aber die meisten der Code ist in Kaffee Skript und es ist nur Elemente in einer Schleife zum DOM hinzufügen. Meine Frage ist, wie Sie Elemente hinzufügen, wenn Sie die Daten bereits korrekt haben. Habe ich den Datensatz noch durchgearbeitet?

Ihre Hilfe wird sehr geschätzt.

Answer 1

UI-Scroll überlässt Ihnen die Entscheidung, welches Ergebnis basierend auf einem Index und einer Zählung an die Erfolgsrückruffunktion zurückgegeben wird. So etwas sollte arbeits

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

Beachten Sie, dass der Index, den Sie übergeben werden, ist nicht Null, so basiert, wenn Sie mit einem Array arbeiten Sie einen Index verwenden, die Null-Basis (daher der Index- 1). Außerdem sollten Sie in Erwägung ziehen, das Ergebnis außerhalb der get-Funktion zu belassen und Ihre get-Funktion einen Teil des Modells zurückgeben zu lassen, das Sie an UI-Scroll übergeben möchten. jedoch

Answer 2

zach hat den Punkt, zu behandeln, nicht nur weiter, sondern ein Rück auch Scrollen Index, müssen Sie dies tun, bevor Index vorbei und zählen zum Erfolg:

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

IE, der resultierende Code sollte sehen wie folgt aus:

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