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（）関数をtypescript関数に変換する際にいくつかの問題があります... typescriptで$ broadcastをどのように使うかについてのアイデアはありますか？ select文の中の要素はf12を押すと表示されるだけなので私はそれが$ブロードキャスト –

の実装が悪いので、この例と大きく違ってはいけないと思っています。コントローラクラスに '$ scope'を挿入するのを忘れたのでしょうか？あなたが投稿したコードだけでは分かりません。おそらくあなたは[this]（https://stackoverflow.com/a/43542420/5173530）の答えや関連するもの、幸運を見てください。 –

それは問題だった..もう一度ありがとう！ –

md-select内でmd-virtual-repeatを使用していない？

答えて

関連する問題