在md-select中使用md-virtual-repeat不起作用？

我想使用md-select向用戶顯示大量數據。打開md-select時，瀏覽器會凍結。所以作爲一個解決方案，我想在md-select中使用md-virtual repeat來獲得更好的性能。但代碼ISN（T剛剛工作了我。難道我做錯了什麼嗎？在md-select中使用md-virtual-repeat不起作用？

<md-input-container flex> 
    <label>test</label> 
    <md-select ng-model="$ctrl.haha"> 
    <md-virtual-repeat-container id="vertical-container"> 
     <md-option md-virtual-repeat="item in ctrl.infiniteItems" md-on-demand ng-value="item" ng-selected="$first"> 
     {{item}} 
     </md-option> 
    </md-virtual-repeat-container> 
    </md-select> 
</md-input-container>

#vertical-container { 
    height: 256px; 
}

this.infiniteItems = { 
    numLoaded_: 0, 
    toLoad_: 0, 
    items: [], 

    // Required. 
    getItemAtIndex(index) { 
    if (index > this.numLoaded_) { 
     this.fetchMoreItems_(index); 
     return null; 
    } 
    return this.items[index]; 
    }, 

    // Required. 
    getLength() { 
    return this.numLoaded_ + 5; 
    }, 

    fetchMoreItems_(index) { 
    if (this.toLoad_ < index) { 
     this.toLoad_ += 20; 
     for (let i = 0; i < 10000; i++) { 
     this.items.push(i); 
     } 
     this.numLoaded_ = this.toLoad_; 
    } 
    } 
};

來源

2017-11-25 J.D

爲了這個組合工作，你需要確保你的virtual-repeat-container保持同步，如果你寫了一個簡單的'刷新'功能，打開時選擇：

function() { 
    return $timeout(function() { 
     $scope.$broadcast("$md-resize"); 
    }, 100); 
};

它應該夠了。工作示例：

angular.module("app", ["ngMaterial", "ngSanitize", "ngAnimate"]) 
 
    .controller("MainController", function($scope, $timeout) { 
 

 
    // refresh virtual container 
 
    $scope.refresh = function() { 
 
     return $timeout(function() { 
 
     $scope.$broadcast("$md-resize"); 
 
     }, 100); 
 
    }; 
 

 
    $scope.infiniteItems = { 
 
     _pageSize: 10000, 
 
     toLoad_: 0, 
 
     items: [], 
 

 
     getItemAtIndex(index) { 
 
     if (index > this.items.length) { 
 
      this.fetchMoreItems_(index); 
 
      return null; 
 
     } 
 
     return this.items[index]; 
 
     }, 
 

 
     getLength() { 
 
     return this.items.length + 5; 
 
     }, 
 

 
     fetchMoreItems_(index) { 
 
     if (this.toLoad_ < index) { 
 
      this.toLoad_ += this._pageSize; 
 

 
      // simulate $http request 
 
      $timeout(angular.noop, 300) 
 
      .then(() => { 
 
       for (let i = 0; i < this._pageSize; i++) { 
 
       this.items.push(i) 
 
       } 
 
      }); 
 
     } 
 
     } 
 
    }; 
 

 
    });

#vertical-container { 
 
    height: 256px; 
 
}

<!DOCTYPE html> 
 
<html> 
 
    <head> 
 
    <meta charset="utf-8"> 
 
    <title>select with md-virtual-repeat</title> 
 
    <link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/angular-material/1.0.9/angular-material.min.css"> 
 
    <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.7/angular.min.js"></script> 
 
    <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.7/angular-aria.min.js"></script> 
 
    <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.7/angular-animate.min.js"></script> 
 
    <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.7/angular-sanitize.min.js"></script> 
 
    <script src="https://cdnjs.cloudflare.com/ajax/libs/angular-material/1.0.9/angular-material.min.js"></script> 
 
    </head> 
 
    <body> 
 
    <div class="main" ng-app="app" ng-controller="MainController" layout="column" layout-align="center center" layout-fill> 
 
     <md-input-container> 
 
     <label>Select an option</label> 
 
     <md-select ng-model="haha" md-on-open="refresh()"> 
 
      <md-virtual-repeat-container id="vertical-container"> 
 
      <md-option md-virtual-repeat="item in infiniteItems" md-on-demand="" ng-value="item" ng-selected="haha==item">{{item}}</md-option> 
 
      </md-virtual-repeat-container> 
 
     </md-select> 
 
     </md-input-container> 
 
    </div> 
 
    </script> 
 
    </body> 
 

 
</html>

您還可以檢查出this類似的答案。

來源

2017-11-25 17:05:41

謝謝！它工作，如果我使用javaScript，但我有轉換Refresh（）函數打字機功能的一些問題...任何想法如何在打字機中使用$廣播？因爲select語句中的元素只有在按f12時纔會顯示。我認爲這是因爲$ broadcast –

的實現不好，它應該和這個例子差別很大，也許你忘了在控制器類中注入'$ scope'？很難從你發佈的代碼中分辨出來..也許你應該看看[this]（https://stackoverflow.com/a/43542420/5173530）回答或相關問題，祝你好運！ –

這就是問題所在。再次感謝！ –