Question

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

实际行为：

问题是什么？ *

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

预期的行为是什么？

我预计会渲染所有项目。

显示您的问题的CodePen演示：

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

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

角度版本：

Angular Version： 1.5.5

Angular Material Version： 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

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

(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);
})()

AngularJS：Angular Material Virtual Repeat＆amp; MD-列表

1 个答案: