AngularJS：Angular Material Virtual Repeat & md-list

Question

将虚拟重复与 md-list 一起使用时，我遇到了奇怪的行为。这是我在 GitHub 上概述的问题：

实际行为：

有什么问题？ *

当列表实现为 md-virtual-repeat-container 时，并非所有项目都在 md-list 上呈现。

预期的行为是什么？

我希望所有项目都被渲染。

显示您的问题的 CodePen Demo：

http://codepen.io/frikkievb/pen/VKbEXZ

详细信息：我发现某些值没有在 md-list 上呈现。在我这边，它通常是从每个页面的 0 索引开始的项目。

Angular 版本：

Angular 版本： 1.5.5

Angular 材质版本： v1.1.1

浏览器类型：* Chrome

浏览器版本：* 53.0.2785.116 m

操作系统：* Windows 10

HTML

<div ng-controller="MyAppController as ctrl" ng-cloak="" class="virtualRepeatdemoDeferredLoading" ng-app="MyApp">

  <md-content layout="column">
    <div ui-view="projectContent">

      <md-list md-virtual-repeat-container style="height:500px">
        <md-list-item class="md-2-line" md-virtual-repeat="item in ctrl.items" md-on-demand ng-click="ctrl.edit()">
          Item: {{item}}
        </md-list-item>
      </md-list>
    </div>


</div>

JavaScript

/** * 由 frikk 于 2016/08/01 创建。 */

(function () {

    function MyAppController() {

        var vm = this;
        vm.edit = edit;

        vm.items = {

            pages: [],
            pageSize: 10,
            getItemAtIndex: function (index) {

                var pageNumber = Math.floor(index / this.pageSize);
                var page = this.pages[pageNumber];
                if (page) {
                    return page[index % this.pageSize];
                } else if (page !== null) {
                    this.fetchPage(pageNumber);
                }
            },
            getLength: function () {
                return 50;
            },
            fetchPage: function (pageNumber) {
                this.pages[pageNumber] = null;
                var pageOffset = pageNumber * this.pageSize;
                this.pages[pageNumber] = [];
                for (var i = pageOffset; i < pageOffset + this.pageSize; i++) {
                    this.pages[pageNumber].push(i);
                }
            }
        }



        function edit() {

        }
    }

    angular.module("MyApp",[
      "ngAria",
      "ngAnimate",
        "ngMessages",
        "ngMaterial",
    ])
        .controller("MyAppController", [MyAppController]);
})()

Answer 1

这是一个非常不寻常的问题，我已经部分解决了 - CodePen

继demos 中的示例之后，我在 fetchPage 中引入了 $timeout。这解决了不显示所有项目的问题。但是，您会注意到最初显示某些项目时会稍有延迟。

JS

(function () {
    MyAppController.$inject = ["$timeout"];

    function MyAppController($timeout) {
      var vm = this;

      vm.items = {

        pages: [],
        pageSize: 10,
        temp: [],
        getItemAtIndex: function (index) {

          var pageNumber = Math.floor(index / this.pageSize);
          var page = this.pages[pageNumber];
          if (page) {
            return page[index % this.pageSize];
          } else if (page !== null) {
            this.fetchPage(pageNumber);
          }
        },
        getLength: function () {
          return 50;
        },
        fetchPage: function (pageNumber) {
          var pageOffset = pageNumber * this.pageSize;
          this.pages[pageNumber] = [];
          this.temp = [];
          for (var i = pageOffset; i < pageOffset + this.pageSize; i++) {
            this.temp.push(i);
          }
          $timeout(angular.noop).then(angular.bind(this, function () {
            this.pages[pageNumber] = this.temp;
          }));
        }
      }
    }

    angular.module("MyApp",[
      "ngAria",
      "ngAnimate",
      "ngMessages",
      "ngMaterial",
    ])
      .controller("MyAppController", MyAppController);
})()