AngularJS從ng-repeat設置父級高度

我有一個ng-repeat，它具有可變的高度。如果我使用固定的高度，一切看起來都不錯。但我需要根據ng-repeat子元素自動調整父面板的高度，否則我有溢出問題。AngularJS從ng-repeat設置父級高度

有沒有辦法做到這一點？

隨着固定的高度（參見溢出在底部）：

沒有固定高度：

面板的代碼：

<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>

來源

2017-04-19 johan

如果固定高度適用於你，你爲什麼不根據你通過ng-style在ng-repeat中重複的數據的長度將它添加到父項中？

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

30是一個「重複」塊的高度

來源

2017-04-19 11:58:16

感謝，這種變型可以工作 – johan

AngularJS從ng-repeat設置父級高度

回答

相關問題