具有$ http请求的材质角度无限滚动

Question

具有$ http请求的材质角度无限滚动

Asi*_*ian 6 javascript angularjs angular-material

我正在使用md-virtual-repeat指令Angular Material来进行无限滚动,我需要用$ http请求替换它的demo $ timeout函数.但我无法找到正确的解决方案.在下面的代码中,无限滚动工作正常,但不显示来自http请求的数据.问题是我不知道将$ http结果绑定到infiniteItems的方法.

这是掠夺者.

的index.html

<body ng-app="infiniteScrolling" class="virtualRepeatdemoInfiniteScroll">
<div ng-controller="AppCtrl as ctrl" ng-cloak>
    <md-content layout="column">
        <md-virtual-repeat-container id="vertical-container" flex>
            <div md-virtual-repeat="item in ctrl.infiniteItems" md-on-demand
                 class="repeated-item" flex>
                {{item.id}}
            </div>
        </md-virtual-repeat-container>
    </md-content>
</div>
</body>

Run Code Online (Sandbox Code Playgroud)

JS:

(function () {
'use strict';
angular
  .module('infiniteScrolling', ['ngMaterial'])
  .controller('AppCtrl', function ($timeout,$scope,$http) {
     this.infiniteItems = {
          numLoaded_: 0,
          toLoad_: 0,
          items:[],
          getItemAtIndex: function (index) {
              if (index > this.numLoaded_) {
                  this.fetchMoreItems_(index);
                  return null;
              }
              return index;
          },
          getLength: function () {
              return this.numLoaded_ + 5;
          },
          fetchMoreItems_: function (index) {
               if (this.toLoad_ < index) {
                  this.toLoad_ += 20;

                  $http.get('items.json').success(function (data) {
                      var items = data;
                      for (var i = 0; i < items.length; i++) {
                          this.items.push(items[i].data);
                      }
                      this.numLoaded_ = this.toLoad_;
                  }.bind(this));
              }
          }
      };
   });
})();

Run Code Online (Sandbox Code Playgroud)

Answer 1

Ale*_*gin 11

这个工作:

plnkr

getItemAtIndex返回索引而不是项目
如果你检查了你所推动的东西,你会看到我的插件中的第33行我连续obj.data,不平坦obj

(function () {
    'use strict';
    angular.module('infiniteScrolling', ['ngMaterial'])
      .controller('AppCtrl', function ($scope, $http) {
          // In this example, we set up our model using a plain object.
          // Using a class works too. All that matters is that we implement
          // getItemAtIndex and getLength.
          var vm = this;
          vm.infiniteItems = {
              numLoaded_: 0,
              toLoad_: 0,
              items: [],

              // Required.
              getItemAtIndex: function (index) {
                  if (index > this.numLoaded_) {
                      this.fetchMoreItems_(index);
                      return null;
                  }
                  return this.items[index];
              },

              // Required.
              getLength: function () {
                  return this.numLoaded_ + 5;
              },

              fetchMoreItems_: function (index) {
                  if (this.toLoad_ < index) {
                      this.toLoad_ += 5;
                      $http.get('items.json').then(angular.bind(this, function (obj) {
                          this.items = this.items.concat(obj.data);
                          this.numLoaded_ = this.toLoad_;
                      }));
                  }
              }
          }
      })
})();

Run Code Online (Sandbox Code Playgroud)

归档时间：	10 年，10 月前
查看次数：	10320 次
最近记录：	9 年，8 月前