CODEWITHSUNDEEP
angularjsangular-material
Mohamed Nizar
Mohamed Nizar

Reputation: 777

md-virtual-repeat not working wiht md-select

I'm trying to implement md-virtual-repeat for md-select which has more than 2000 items to select. This not working with the md-option.

<md-input-container>
    <md-select ng-model="break.start_time" md-on-open="vm.mdSelectOnOpen()">
        <md-virtual-repeat-container id="vertical-container">
            <md-option md-virtual-repeat="option in vm.time" value="option.value" >{{option.text}}</md-option>
        </md-virtual-repeat-container>
    </md-select>
</md-input-container>

What is the problem with this? I have updated a plunker with my problem. see

Upvotes: 0

Views: 1011

Answers (2)

Sebastian Lopez
Sebastian Lopez

Reputation: 1

I know this is an old thread, but maybe this can help to someone. If the following did not work

$scope.$broadcast("$md-resize")

use this instead:

angular.element(window).triggerHandler('resize')

Upvotes: 0

Naren Murali
Naren Murali

Reputation: 56307

Updated Answer

Since you are using md-virtual select the check boxes you can refer the below codepen, there was no need to add a check box itself since md-select has an attribute called multiple which will add the check boxes

Code

<md-input-container>
    <label>Select an option</label>
    <md-select ng-model="selectedOption" md-on-open="mdSelectOnOpen()" multiple>
       <md-virtual-repeat-container id="vertical-container">
         <md-option md-virtual-repeat="option in options" ng-value="option" ng-selected="selectedOption.indexOf(option) > -1">{{option}}</md-option>
      </md-virtual-repeat-container>
    </md-select>
  </md-input-container>

Codepen: here

Old Answer

You need to give ng-selected option and ng-value.

<md-input-container>
    <md-select ng-model="break.start_time" md-on-open="vm.mdSelectOnOpen()">
        <md-virtual-repeat-container id="vertical-container">
            <md-option md-virtual-repeat="option in vm.time" ng-value="option.value" ng-selected="break.start_time==option.value">{{option.text}}</md-option>
        </md-virtual-repeat-container>
    </md-select>
</md-input-container>

Refer: codepen

Upvotes: 2

Related Questions