Question

我不确定如何使用ui-scroll。我创建了一个plunker，但我不认为它正常工作，因为它不会在滚动时添加或删除DOM中的项目。它全部显示出来！

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

我查看了Github上的几个例子，但大多数代码都是在咖啡脚本中，它只是在循环中向DOM添加项目。我的问题是如果你已经正确地拥有数据，你如何添加项目。我还在迭代数据集吗？

非常感谢您的帮助。

Answer 1

UI-Scroll让您了解基于索引和计数返回成功回调函数的结果。这样的事情应该有用 -

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

请注意，传递的索引是非零的，因此在使用数组时，必须使用从零开始的索引（因此索引为1）。此外，您可能需要考虑将结果保留在get函数之外，并让get函数返回要传递给UI-Scroll的模型的一部分。

Answer 2

zach有重点，但是不仅要处理第四个而且要反向滚动索引，你必须在传递索引和计数成功之前执行此操作：

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

I.E。，结果代码应如下所示：

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

Angularjs ui-utils ui-scroll如何使用

2 个答案: