angularjs – 如何将“ui-scroll”与我自己的数据一起使用？

发布时间：2020-12-17 07:09:18 所属栏目：安全来源：网络整理

导读：我正在尝试在我的应用程序中创建无限滚动功能,但感觉有点抽象.我想使用 ui-scroll和 this fiddle显示它是如何工作的简单示例. 我已经阅读了自述文件,并查看了一些示例,我已将示例集成到我的项目中并使其正常工作,但我无法弄清楚如何将其与我自己的数据库中的

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

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

我有一个名为电影的数据库表.电影有一些值,如title,release_date,image_url

我如何将这些数据插入$scope.movi??eDataSource,以便在我的视图中使用它？

$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.movi??eDataSource),它会向我显示movieDataSource [object Object].

解决方法

你使这比必要的更复杂. 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.

在你的情况下,你有一系列的项目.每次索引或计数发生更改时,都会触发成功,此函数应返回数组的子集,从索引到索引计数.有多种方法可以实现这一目标.您发布的示例使用for循环迭代地将项目推送到数组中.你也可以使用the Array.slice() method.

选项1：

$scope.movieDataSource = {

   get: function(index,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,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>

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!