Question

我正在尝试在我的应用程序中创建无限滚动功能，但感觉有点抽象。我想使用ui-scroll，this fiddle显示了一个简单的示例。

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

我有一个名为movies的数据库表。电影有一些值，例如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

你使这比必要的更复杂。 uiScroll指令是ngRepeat的替代，它带有3个属性的数据源：

索引表示请求的第一个数据行

count 表示请求的数据行数

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

在您的情况下，您有一系列项目。每次index或count更改，success触发，此函数都会将您的数组的子集从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>

Answer 2

显然ui-scroll调用给定的对象＆＃34; movieDataSource＆＃34;带索引和计数。然后它期望该函数在返回的数组中推送index和index + count之间的所有项。

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

如何在我自己的数据中使用“ui-scroll”？

2 个答案: