md-Raster-Kachel mit besetzen twinkle ng-wenn

Question

i md-gid-Fliese will mit ng-if oder ng-show aber ng-show Verwendung besetzt den Raum nutzen. #6597

So verwendete ich die ng-if aber es belegt

hier simple pan glitzern.

wenn mehrmals twinkle Schaltfläche klicken, können Sie das Glitzern Word-Bündel auf die Schaltfläche unten

sehen Ich möchte das Glitzern Wort Haufen entfernen
:(mir helfen ...

Answer 1

Es tut scheint ein Problem mit ng-if zu sein.Wenn Sie schnell klicken, erscheinen die Wörter manchmal gebündelt unter dem Knopf.Dies scheint nicht der Fall mit ng-show zu sein.Ich habe die ng-if von jedem md-grid-tile entfernt und einen ng-show in den md-grid-list platziert und bewegt das Knopf aus der md-grid-list. Die gebündelten Wörter erscheinen nicht mehr unter der Schaltfläche und die md-grid-list belegt nur Platz, wenn val wahr ist, wie die Position des blauen Quadrats erkennen lässt.

CodePen

Markup

<div> 
    <md-button class="md-primary md-raised" ng-click="toggle()">twinkle</md-button> 
</div> 
<md-grid-list style="margin=10px;"md-cols="4" md-row-height="16:3" ng-show=val> 
    <md-grid-tile> 
    <p>TwinkleAppTwinkleAppTwinkleApp111</p> 
    </md-grid-tile> 
    <md-grid-tile> 
    <p>TwinkleAppTwinkleAppTwinkleApp2</p> 
    </md-grid-tile> 
    <md-grid-tile> 
    <p>TwinkleAppTwinkleAppTwinkleApp3</p> 
    </md-grid-tile> 
    <md-grid-tile> 
    <p>TwinkleAppTwinkleAppTwinkleApp4</p> 
    </md-grid-tile> 
    <md-grid-tile> 
    <p>TwinkleAppTwinkleAppTwinkleApp5</p> 
    </md-grid-tile> 
    <md-grid-tile> 
    <p>TwinkleAppTwinkleAppTwinkleApp6</p> 
    </md-grid-tile> 
</md-grid-list> 
<div style="background:blue; width:100px; height:100px; margin-top:20px;">