AngularJS setze Elternhöhe von ng-repeat

Question

Ich habe eine ng-Wiederholung, die eine variable Höhe hat. Wenn ich eine feste Höhe verwende, sieht alles gut aus. Aber ich brauche die Höhe des Eltern-Panels, um sie automatisch an die untergeordneten ng-repeat-Elemente anzupassen, sonst habe ich Überlaufprobleme.

Gibt es eine Möglichkeit, dies zu tun?

mit fester Höhe (siehe Überlauf an der Unterseite):

ohne feste Höhe:

Der Code der Paneele:

<div class="my-panel" ng-repeat="x in month.days"> 
    <div class="panel-today" ng-show="x.today"> 
     TODAY 
    </div> 
    <div class="panel" ng-class="x.panel_class"> 
     <div class="panel-heading {{x.weekend}}">{{x.day}} {{x.date | date : 'dd-MM'}}</div> 
     <div class="panel-body my-panel-body"> 
      <div ng-show="x.suspension != ''" style="width: 100%; text-align: center"> 
       <b>{{x.suspension}}</b> 
      </div> 
      <div ng-show="x.suspension == ''"> 
       <div class="well well-sm day-well"> 
        <div class="day_period"> 
         <div class="pull-right"> 
          {{x.times.day.from}}<br/> 
          {{x.times.day.to}} 
         </div> 
         <div class="day_head">DAY</div> 
        </div> 
        <div ng-repeat="grade in x.staff.day.m"> 
         <div class="letterCircleM"> 
          {{grade.code}} 
         </div> S SIPHO 
        </div> 
        <div ng-repeat="grade in x.staff.day.f" class="letterCircleF"> 
         {{grade.code}} 
        </div> 
       </div> 
       <div class="well well-sm day-well"> 
        <div class="day_period"> 
         <div class="pull-right"> 
          {{x.times.night.from}}<br/> 
          {{x.times.night.to}} 
         </div> 
         <div class="day_head">NIGHT</div> 
        </div> 
        <div ng-repeat="grade in x.staff.night.m"> 
         <div class="letterCircleM"> 
          {{grade.code}} 
         </div> S SIPHO 
        </div> 
         <div ng-repeat="grade in x.staff.night.f" class="letterCircleF"> 
         {{grade.code}} 
        </div> 
       </div> 
      </div> 
     </div> 
     <div class="panel-footer"> 
      <div class="panel-suspend" ng-show="x.suspension != ''"> 
       SUSPENDED 
      </div> 
      <div ng-show="x.suspension == ''"> 
       {{x.contract}} 
      </div> 
     </div> 
    </div> 
</div> 

Answer 1

Wenn feste Höhe funktioniert für du, warum fügst du es nicht zum Elternteil hinzu, basierend auf der Länge der Daten, die du in ng wiederholst - wiederhole über ng-style?

ng-style="{ 'height': 30 * RepeatData.length + 'px' }

30 ist die Höhe eines "wiederholt" Block