AngularJS：Angular Material虛擬重複＆md-list

Question

我在使用虛擬重複以及md-list時遇到了奇怪的行爲。這是我的問題，因爲概括在GitHub上：

實際行爲：

問題是什麼？ *

當列表實現爲md-virtual-repeat-container時，並非所有項都在md-list上呈現。

預期的行爲是什麼？

我預計所有項目都會被渲染。

CodePen演示這說明您的問題：

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

詳情：我發現，某些值不會被渲染的MD-名單上。在我這邊，通常是從每頁的0索引開始的項目。

角版本：

角版本： 1.5.5

角材質版本： V1.1.1

瀏覽器類型：*鉻

瀏覽器版本：* 53.0.2785.116米

OS：*的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 $超時實例以下講解。這解決了不顯示所有項目的問題。但是，您會注意到最初顯示一些項目的輕微延遲。

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