html - AngularJS 从 ng-repeat 设置父级高度

Question

我有一个高度可变的 ng-repeat。 如果我使用固定高度，一切看起来都不错。但是我需要父面板的高度根据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>

Answer 1

如果固定高度适合您，为什么不根据您在 ng-repeat 中通过 ng-style 重复的数据长度将其添加到父级？

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

30 是一个“重复” block 的高度