3

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

我已经阅读了自述文件并查看了一些示例，我还将示例集成到我的项目中并使其正常工作，但我无法弄清楚如何将其与我自己的数据库中的数据结合起来。

我有一个名为电影的数据库表。电影有一些值，例如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.getuserMovies用我的数据库中的记录填充我的范围，我想将这些记录用作movieDataSource.

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

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

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

4

2 回答 2

8

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

  • index表示请求的第一个数据行
  • count表示请求的数据行数
  • 检索数据时调用的成功函数。服务的实现必须在检索数据时调用此函数，并将检索到的项目的数组传递给它。如果没有检索到任何项目，则必须传递一个空数组。

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

选项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>
于 2015-10-12T16:37:51.147 回答
0

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

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

于 2015-10-12T14:35:11.487 回答