每次使用有角度的材料虚拟重复来回收更多物品

Question

每次滚动出视野时，我不仅想回收第一和最后的物品。

我该如何回收前四项？或给定编号n，列表中的前n个和后n个项。

https://github.com/angular/material/blob/v1.1.10/src/components/virtualRepeat/virtual-repeater.js

这是此问题的密码笔：https://codepen.io/anon/pen/ajbqzN

(function() {
  'use strict';

  angular
    .module('MyApp', ['ngMaterial', 'ngMessages', 'material.svgAssetsCache'])
    .controller('AppCtrl', function($timeout) {

      // In this example, we set up our model using a class.
      // Using a plain object works too. All that matters
      // is that we implement getItemAtIndex and getLength.
      var DynamicItems = function() {
        /**
         * @type {!Object<?Array>} Data pages, keyed by page number (0-index).
         */
        this.loadedPages = {};

        /** @type {number} Total number of items. */
        this.numItems = 0;

        /** @const {number} Number of items to fetch per request. */
        this.PAGE_SIZE = 50;

        this.fetchNumItems_();
      };

      // Required.
      DynamicItems.prototype.getItemAtIndex = function(index) {
        var pageNumber = Math.floor(index / this.PAGE_SIZE);
        var page = this.loadedPages[pageNumber];

        if (page) {
          return page[index % this.PAGE_SIZE];
        } else if (page !== null) {
          this.fetchPage_(pageNumber);
        }
      };

      // Required.
      DynamicItems.prototype.getLength = function() {
        return this.numItems;
      };

      DynamicItems.prototype.fetchPage_ = function(pageNumber) {
        // Set the page to null so we know it is already being fetched.
        this.loadedPages[pageNumber] = null;

        // For demo purposes, we simulate loading more items with a timed
        // promise. In real code, this function would likely contain an
        // $http request.
        $timeout(angular.noop, 300).then(angular.bind(this, function() {
          this.loadedPages[pageNumber] = [];
          var pageOffset = pageNumber * this.PAGE_SIZE;
          for (var i = pageOffset; i < pageOffset + this.PAGE_SIZE; i++) {
            this.loadedPages[pageNumber].push(i);
          }
        }));
      };

      DynamicItems.prototype.fetchNumItems_ = function() {
        // For demo purposes, we simulate loading the item count with a timed
        // promise. In real code, this function would likely contain an
        // $http request.
        $timeout(angular.noop, 300).then(angular.bind(this, function() {
          this.numItems = 50000;
        }));
      };

      this.dynamicItems = new DynamicItems();
    });
})();


/**
Copyright 2018 Google Inc. All Rights Reserved. 
Use of this source code is governed by an MIT-style license that can be foundin the LICENSE file at http://material.angularjs.org/HEAD/license.
**/

.virtualRepeatdemoDeferredLoading #vertical-container {
  height: 292px;
  width: 100%;
  max-width: 400px;
}

.virtualRepeatdemoDeferredLoading .repeated-item {
  border-bottom: 1px solid #ddd;
  box-sizing: border-box;
  height: 40px;
  padding-top: 10px;
}

.virtualRepeatdemoDeferredLoading md-content {
  margin: 16px;
}

.virtualRepeatdemoDeferredLoading md-virtual-repeat-container {
  border: solid 1px grey;
}

.virtualRepeatdemoDeferredLoading .md-virtual-repeat-container .md-virtual-repeat-offsetter div {
  padding-left: 16px;
}


/*
Copyright 2018 Google Inc. All Rights Reserved. 
Use of this source code is governed by an MIT-style license that can be foundin the LICENSE file at http://material.angularjs.org/HEAD/license.
*/

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.7/angular.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.7/angular-animate.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.7/angular-route.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.7/angular-aria.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.7/angular-messages.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.22.1/moment.js"></script>
<script src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/t-114/svg-assets-cache.js"></script>
<script src="https://cdn.gitcdn.link/cdn/angular/bower-material/v1.1.10/angular-material.js"></script>


<div ng-controller="AppCtrl as ctrl" ng-cloak="" class="virtualRepeatdemoDeferredLoading" ng-app="MyApp">
  <md-content layout="column">
    <p>how to recyle first and last n items instead of just 1 first and last items.
    </p>

    <md-virtual-repeat-container id="vertical-container">
      <div md-virtual-repeat="item in ctrl.dynamicItems" md-on-demand="" class="repeated-item" flex="">
        {{item}}
      </div>
    </md-virtual-repeat-container>
  </md-content>

</div>

<!--
Copyright 2018 Google Inc. All Rights Reserved. 
Use of this source code is governed by an MIT-style license that can be foundin the LICENSE file at http://material.angularjs.org/HEAD/license.
-->