在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）回答或相关问题，祝你好运！ –

这就是问题所在。再次感谢！ –