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

Question

我正在尝试在我的应用程序中创建无限滚动功能,但感觉有点抽象.我想使用ui-scroll,这个小提琴显示了它如何工作的简单示例.

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

我有一个名为电影的数据库表.该电影有诸如几个值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个属性的数据源:

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

在你的情况下,你有一系列的项目.每次index或count变化,success火灾,和这个功能应该从返回的数组的子集index来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>