如何对自己的数据使用“ui-滚动”？

Question

我试图在我的应用程序中创建一个无限滚动功能，但它感觉有点抽象。我想使用用户界面卷轴，这把小提琴展示了一个简单的例子来说明它是如何工作的。

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

我有一个叫做电影的数据库表。这些电影有一些价值，如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循环迭代地将项推送到数组中。您也可以使用方法。

备选案文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-重复，则应该是相同的：

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

Answer 2

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

这意味着您必须实现从DB (通过REST或无论如何访问数据)获取相应项的代码，并在items数组中插入返回的记录。