virtual-repeat: does not show with md-options

[mohamednizar]

Actual Behavior:

• What is the issue? * md-virtual-repeat does not show with md-options . But some of this is listing, but not behave as a selection <md-input-container> <md-select ng-model='off.start_time' md-on-open='vm.mdSelectOnOpen()' multiple="false"> <md-virtual-repeat-container id="vertical-container"> <md-option md-virtual-repeat="option in vm.time" ng-value="option.value" ng-click="break.end_time=option.value">{{option.text}}</md-option> </md-virtual-repeat-container> </md-select> </md-input-container>
• What is the expected behavior?

CodePen (or steps to reproduce the issue): *

• CodePen Demo which shows your issue:
• Details: I have tried some thinks, this working some how, but as expected as md-select. <md-input-container> <md-select ng-model='off.start_time' md-on-open='vm.mdSelectOnOpen()' multiple="false"> <md-virtual-repeat-container id="vertical-container"> <md-list-item md-virtual-repeat="option in vm.time"> <md-option ng-value="option.value" ng-click="break.end_time=option.value">{{option.text}}</md-option> </md-list-item> </md-virtual-repeat-container> </md-select> </md-input-container> AngularJS Versions: *
• AngularJS Version: 1.5.8
• AngularJS Material Version: 1.1.1

Additional Information:

• Browser Type: * chrome
• Browser Version: * Version 58.0.3029.110 (64-bit)
• OS: * Ubuntu 16.04
• Stack Traces:

---

Shortcut to create a new CodePen Demo. Note: * indicates required information. Without this information, your issue may be auto-closed.

Do not modify the titles or questions. Simply add your responses to the ends of the questions. Add more lines if needed.

[patrick-radulian]

+1

Found this Codepen demo by Alex Khmelnitsky, which uses Angular Material 1.0.9. In this version, the virtual-repeat directive inside md-select still worked.

Here is another Codepen demo by me, using Angular Material 1.1.0. Since that version, seemingly, the virtual-repeat directive does not work in md-selects anymore.

I have tested both Angular Material 1.0.9 and 1.1.0 with Angular 1.5.7 (as originally used by Alex Khmelnitsky (first codepen demo) and with Angular 1.6.5 (latest version as of this post). In all cases the virtual-repeat fails with Angular Material 1.1.0 and works with 1.0.9.

[FlavaSava7]

+1

[Splaktar]

Updated CodePen for AngularJS Material 1.1.5 and AngularJS 1.6.6. This looks like a regression that can still be reproduced.

[jgunderson-IAS]

A fix for now is triggering a window resize along side the $md-resize broadcast.

https://codepen.io/anon/pen/zRBWJR

[briosheje]

Did anyone find any clever way to handle the ng-model? I'm having hard times figuring it out, since it will only be displayed if the virtual-repeat is showing it, otherwise the model will exist but the select will be marked as empty.

[philesc]

A fix for now is triggering a window resize along side the $md-resize broadcast.

https://codepen.io/anon/pen/zRBWJR

thank you, it works ;)

[DjiGe]

@briosheje I used the md-selected-text attribute of md-select

[mohamednizar]

Yes, It's working now.

[wiibaa]

@mohamednizar do you mean it works using the workaround of triggering window resize ? because I cannot make the codepen working just by upgrading to 1.1.11

@Splaktar could you please keep this issue open

[Nexuswiz]

@mohamednizar, @Splaktar actually the problem could be a bit more interesting than it seemed. Here is a codepen with just two md-selects with embedded md-virtual-repeats. After selecting each one few times (one after another) we can easily see values disappearing from selects\values rendered with increasing delay, until $rootScope:infdig fires. And actually keeps firing and i got whole browser frosen for a second or two, with value rendered between 6 and 5 in epileptic way.

https://codepen.io/dDth/pen/wNEEbB

I just slightly modified @jgunderson-IAS 's https://codepen.io/anon/pen/zRBWJR

[Splaktar]

@Nexuswiz wiibaa can one or both of you please open a new issue and reference this one in the description?

[Splaktar]

I'm going to re-open this as it is still an issue and the above workarounds should not be required.

[marosoft]

@Splaktar I do not think this is a regression. I noticed that after this fix was implemented, the performance was improved and that is why the workaround with broadcasting the $md-resize stopped working.

This CodePen shows you that the workaround is working when that fix is reverted. However when you comment out lines 8-12 and try again, it stops working properly and it shows an empty list.

I am not sure if it ever worked correctly. I did not see anything obvious as to why the list is empty. It might be because it his hidden in the first place and that is why the size is not properly calculated. One thing I noticed is that it shows the items when you apply md-item-size on md-option. This could be a workaround when you provide the proper size.

[clementbirkle]

@Splaktar is the problem already fixed in 1.1.23? For me the problem is still present. You can see it with the 1.1.24 on CodePen.

[Splaktar]

@clementbirkle no, there is no fix yet, the issue is still open.

[sebastian77790]

I know is an old thread, but maybe this can help to someone. If $scope.$broadcast("$md-resize") didn't work use this instead: angular.element(window).triggerHandler('resize');