Question

我想使用md-select向用户显示大量数据。打开md-select时，浏览器会冻结。因此，作为一种解决方案，我想在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_;
    }
  }
};

Answer 1

要使此组合有效，您需要确保virtual-repeat-container保持同步。如果你编写一个简单的'刷新'函数，可以在open上调用：

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类似的答案。

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

1 个答案: