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是一个“重复”块的高度

AngularJS从ng-repeat设置父高度

1 个答案: