如何将 "ui-scroll" 用于我自己的数据？

Question

我正在尝试在我的应用程序中创建无限滚动功能，但感觉有点抽象。我想使用 ui-scroll and this fiddle 显示一个简单的例子来说明它是如何工作的。

我已经阅读了自述文件并查看了一些示例，我已经将该示例集成到我的项目中并使其运行，但我不知道如何将它与我自己的数据库中的数据结合起来。

我有一个名为电影的数据库table。电影有一些值，例如 title、release_date、image_url

如何将该数据插入 $scope.movieDataSource 以便在我的视图中使用它？

$http.get(('/movies.json'), {
    cache: true
  })
  .success(function(data, status, headers, config) {
    if (status == 200) {
      $scope.userMovies = data;
    } else {
      console.error('Error happened while getting the user list.')
    }
    $scope.movieDataSource = {
      get: function(index, count, callback) {
        var i, items = [$scope.userMovies], item;
        var min = 1;
        var max = 1000;

        for (i = index; i < index + count; i++) {
          if (i < min || i > max) {
            continue;
          }
          item = {
            title: $scope.userMovies.title,
            imageURL: $scope.userMovies.poster_path
          };
          items.push(item);
        }
        callback(items);
      }
    }
  });

我试图创建一个例子来说明我想要达到的目的。我使用 http.get 用数据库中的记录填充 userMovies 范围，我想将这些记录用作 movieDataSource 中的项目。

但是当我访问页面时 ui-scroll 确实在容器中添加了结果，但它不显示内容。

<div class="imageCell ng-scope" ui-scroll="item in movieDataSource">
  <img title="">
</div>

如果我 console.log("movieDataSource" + $scope.movieDataSource) 它显示我 movieDataSource[object Object]。

Answer 1

显然 ui-scroll 使用索引和计数调用给定对象 "movieDataSource"。然后它期望该函数将索引和索引 + 计数之间的所有项目推送到返回的数组中。

这意味着您必须实现从数据库中获取相应项目的代码（通过 REST 或您访问数据的任何方式）并将返回的记录插入项目数组。

Answer 2

你把这件事变得比必要的更复杂了。 uiScroll 指令是 ngRepeat 的替代品，它采用具有 3 个属性的数据源：

index indicates the first data row requested

count indicates number of data rows requested

success function to call when the data are retrieved. The implementation of the service has to call this function when the data are retrieved and pass it an array of the items retrieved. If no items are retrieved, an empty array has to be passed.

在您的例子中，您有一系列项目。每次 index 或 count 更改时，success 都会触发，并且此函数应该 return 数组的一个子集，从 index 到 index + count .有多种方法可以实现这一点。您发布的示例使用 for 循环迭代地将项目推入数组。您也可以使用 the Array.slice() method.

选项 1：

 $scope.movieDataSource = {

   get: function(index, count, callback) {
     var i, items = [], item;

     for (i = index; i < index + count; i++) {
       item = $scope.userMovies[i];
       items.push(item);
     };

     callback(items);
   }
 }

选项 2：

 $scope.movieDataSource = {

   get: function(index, count, callback) {
     var items = $scope.userMovies.slice(index, index + count);
     callback(items);
   }
 }

至于你的 HTML，它应该与你使用 ng-repeat 时相同：

<div ui-scroll="item in movieDataSource">
  {{item.title}}
  <img title="{{item.title}}" ng-src="{{item.poster_path}}"></img>
</div>

如何将 "ui-scroll" 用于我自己的数据？

How can I use "ui-scroll" with my own data?

angularjs

ui-scroll

virtualscroll