AngularJS： Angular Material Virtual Repeat & md-list

在使用虚拟repeat和md-list时，我遇到了奇怪的行为。以下是我在GitHub上概述的问题:

实际行为:

有什么问题?*

当list被实现为md-virtual-repeat-container时，并不是所有的项都在md-list上呈现。

期望的行为是什么?

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

CodePen演示，显示您的问题:

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

Details:我发现某些值没有在md-list上呈现。在我这边，通常是从每一页的第0个索引开始的项目。

Angular版本:Angular版本: 1.5.5

Angular材质版本: v1.1.1

浏览器类型:* Chrome

浏览器版本:* 53.0.2785.116 m

OS: * Windows 10

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

这是一个非常不寻常的问题，我已经部分修复- CodePen

继演示中的示例之后，我在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); })()

相关内容

最新更新

热门标签：