javascript - 调整由 ng-if 指令动态生成的 标签的高度

Question

问候和问候 friend 。

场景:我正在制作一个页面，该页面将根据来自后端的 JSON 信息生成发票。它在包含的 div 上使用 ng-repeat，然后在多个 p 标签上使用 ng-if，如下所示:

<div ng-repeat="thumb in responseArray" ng-if="responseArray.length >= 1" class="figures" layout="column" layout-align="center end">
            <p><b>{{thumb.supplier_name}}</b></p>
            <p class="stakedLabel">Staked:</p>
            <p class="staked">{{thumb.staked}}</p>
            <p class="returnsLabel">Returns:</p>
            <p class="returns"> {{thumb.returns}}</p>
            <p class="grossLabel">Gross: </p>
            <p ng-if="thumb.theList.length > 1" class="gross">{{thumb.gross}}</p>
            <p ng-if="thumb.theList.length == 1" class="chargeDetailsOnePartASingleton">{{thumb.theList[0][0]}}</p>
            <p ng-if="thumb.theList.length == 1" class="chargeDetailsOnePartBSingleton">{{thumb.theList[0][1]}}</p>
            <p ng-if="thumb.chargeDetailsOne != '' && thumb.theList.length > 1" class="chargeDetailsOnePartA">{{thumb.theList[0][0]}}</p>
            <p ng-if="thumb.chargeDetailsOne != '' && thumb.theList.length > 1" class="chargeDetailsOnePartB">{{thumb.theList[0][1]}}</p>
            <p ng-if="thumb.chargeDetailsOne != '' && thumb.theList.length > 1" class="chargeDetailsOnePartC">{{thumb.theList[0][2]}}</p>
            <p ng-if="thumb.chargeDetailsTwo != '' && thumb.theList.length > 1" class="chargeDetailsTwoPartA">{{thumb.theList[1][0]}}</p>
            <p ng-if="thumb.chargeDetailsTwo != '' && thumb.theList.length > 1" class="chargeDetailsTwoPartB">{{thumb.theList[1][1]}}</p>
            <p ng-if="thumb.chargeDetailsTwo != '' && thumb.theList.length > 1" class="chargeDetailsTwoPartC">{{thumb.theList[1][2]}}</p>
            <p ng-if="thumb.chargeDetailsThree != '' && thumb.theList.length > 2" class="chargeDetailsThreePartA">{{thumb.theList[2][0]}}</p>
            <p ng-if="thumb.chargeDetailsThree != '' && thumb.theList.length > 2" class="chargeDetailsThreePartB">{{thumb.theList[2][1]}}</p>
            <p ng-if="thumb.chargeDetailsThree != '' && thumb.theList.length > 2" class="chargeDetailsThreePartC">{{thumb.theList[2][2]}}</p>
            <p ng-if="thumb.chargeDetailsFour != '' && thumb.theList.length > 3" class="chargeDetailsFourPartA">{{thumb.theList[3][0]}}</p>
            <p ng-if="thumb.chargeDetailsFour != '' && thumb.theList.length > 3" class="chargeDetailsFourPartB">{{thumb.theList[3][1]}}</p>
            <p ng-if="thumb.chargeDetailsFour != '' && thumb.theList.length > 3" class="chargeDetailsFourPartC">{{thumb.theList[3][2]}}</p>
            <p ng-if="thumb.chargeDetailsFive != '' && thumb.theList.length > 4" class="chargeDetailsFivePartA">{{thumb.theList[4][0]}}</p>
            <p ng-if="thumb.chargeDetailsFive != '' && thumb.theList.length > 4" class="chargeDetailsFivePartB">{{thumb.theList[4][1]}}</p>
            <p ng-if="thumb.chargeDetailsFive != '' && thumb.theList.length > 4" class="chargeDetailsFivePartC">{{thumb.theList[4][2]}}</p>                
        </div>

问题是我希望 div 在运行时根据其内容理想地调整大小，否则只能动态设置两个不同的高度。关于 div 的生成方式有两个总体选项:一种类型将相当短，当 theList.length 为 1 时将使用，另一种类型大约是大小的两倍。

我现在的css如下:

   .figures {
        border-width: 2px;
        border-style: solid;
        border-color: black;
        position: relative;
        height: 180px;
        top: -20px;
    }  

我尝试了很多不同的方法，例如没有高度、将高度设置为自动、将溢出设置为自动、使用 clearfix 解决方法等等。

如有任何帮助，我们将不胜感激。

Answer 1

我最终通过为每种记录类型(即 div 的长度)创建一个列表然后在每个列表上使用 ng-repeat 来修复它。这允许我为每种类型设置不同的类，从而设置不同的高度。

有点变通，但效果不错

<div ng-repeat="thumb in arrayOfOneTiers" ng-if="arrayOfOneTiers.length >= 1" class="figuresOneTier" layout="column" layout-align="center end">
            <p><b>{{thumb.supplier_name}}</b></p>
            <p class="stakedLabel">Staked:</p>
            <p class="staked">{{thumb.staked}}</p>
            <p class="returnsLabel">Returns:</p>
            <p class="returns"> {{thumb.returns}}</p>
            <p class="grossLabel">Gross: </p>
            <p ng-if="thumb.theList.length > 1" class="gross">{{thumb.gross}}</p>
            <p ng-if="thumb.theList.length == 1" class="chargeDetailsOnePartASingleton">{{thumb.theList[0][0]}}</p>
            <p ng-if="thumb.theList.length == 1" class="chargeDetailsOnePartBSingleton">{{thumb.theList[0][1]}}</p>
            <p ng-if="thumb.chargeDetailsOne != '' && thumb.theList.length > 1" class="chargeDetailsOnePartA">{{thumb.theList[0][0]}}</p>
            <p ng-if="thumb.chargeDetailsOne != '' && thumb.theList.length > 1" class="chargeDetailsOnePartB">{{thumb.theList[0][1]}}</p>
            <p ng-if="thumb.chargeDetailsOne != '' && thumb.theList.length > 1" class="chargeDetailsOnePartC">{{thumb.theList[0][2]}}</p>
        </div>
        <div ng-repeat="thumb in arrayOfTwoTiers" ng-if="arrayOfTwoTiers.length >= 1" class="figuresTwoTier" layout="column" layout-align="center end">
            <p><b>{{thumb.supplier_name}}</b></p>
            <p class="stakedLabel">Staked:</p>
            <p class="staked">{{thumb.staked}}</p>
            <p class="returnsLabel">Returns:</p>
            <p class="returns"> {{thumb.returns}}</p>
            <p class="grossLabel">Gross: </p>
            <p ng-if="thumb.theList.length > 1" class="gross">{{thumb.gross}}</p>
            <p ng-if="thumb.theList.length == 1" class="chargeDetailsOnePartASingleton">{{thumb.theList[0][0]}}</p>
            <p ng-if="thumb.theList.length == 1" class="chargeDetailsOnePartBSingleton">{{thumb.theList[0][1]}}</p>
            <p ng-if="thumb.chargeDetailsOne != '' && thumb.theList.length > 1" class="chargeDetailsOnePartA">{{thumb.theList[0][0]}}</p>
            <p ng-if="thumb.chargeDetailsOne != '' && thumb.theList.length > 1" class="chargeDetailsOnePartB">{{thumb.theList[0][1]}}</p>
            <p ng-if="thumb.chargeDetailsOne != '' && thumb.theList.length > 1" class="chargeDetailsOnePartC">{{thumb.theList[0][2]}}</p>
            <p ng-if="thumb.chargeDetailsTwo != '' && thumb.theList.length > 1" class="chargeDetailsTwoPartA">{{thumb.theList[1][0]}}</p>
            <p ng-if="thumb.chargeDetailsTwo != '' && thumb.theList.length > 1" class="chargeDetailsTwoPartB">{{thumb.theList[1][1]}}</p>
            <p ng-if="thumb.chargeDetailsTwo != '' && thumb.theList.length > 1" class="chargeDetailsTwoPartC">{{thumb.theList[1][2]}}</p>
        </div>
        <div ng-repeat="thumb in arrayOfThreeTiers" ng-if="arrayOfThreeTiers.length >= 1" class="figuresThreeTier" layout="column" layout-align="center end">
            <p><b>{{thumb.supplier_name}}</b></p>
            <p class="stakedLabel">Staked:</p>
            <p class="staked">{{thumb.staked}}</p>
            <p class="returnsLabel">Returns:</p>
            <p class="returns"> {{thumb.returns}}</p>
            <p class="grossLabel">Gross: </p>
            <p ng-if="thumb.theList.length > 1" class="gross">{{thumb.gross}}</p>
            <p ng-if="thumb.theList.length == 1" class="chargeDetailsOnePartASingleton">{{thumb.theList[0][0]}}</p>
            <p ng-if="thumb.theList.length == 1" class="chargeDetailsOnePartBSingleton">{{thumb.theList[0][1]}}</p>
            <p ng-if="thumb.chargeDetailsOne != '' && thumb.theList.length > 1" class="chargeDetailsOnePartA">{{thumb.theList[0][0]}}</p>
            <p ng-if="thumb.chargeDetailsOne != '' && thumb.theList.length > 1" class="chargeDetailsOnePartB">{{thumb.theList[0][1]}}</p>
            <p ng-if="thumb.chargeDetailsOne != '' && thumb.theList.length > 1" class="chargeDetailsOnePartC">{{thumb.theList[0][2]}}</p>
            <p ng-if="thumb.chargeDetailsTwo != '' && thumb.theList.length > 1" class="chargeDetailsTwoPartA">{{thumb.theList[1][0]}}</p>
            <p ng-if="thumb.chargeDetailsTwo != '' && thumb.theList.length > 1" class="chargeDetailsTwoPartB">{{thumb.theList[1][1]}}</p>
            <p ng-if="thumb.chargeDetailsTwo != '' && thumb.theList.length > 1" class="chargeDetailsTwoPartC">{{thumb.theList[1][2]}}</p>
            <p ng-if="thumb.chargeDetailsThree != '' && thumb.theList.length > 2" class="chargeDetailsThreePartA">{{thumb.theList[2][0]}}</p>
            <p ng-if="thumb.chargeDetailsThree != '' && thumb.theList.length > 2" class="chargeDetailsThreePartB">{{thumb.theList[2][1]}}</p>
            <p ng-if="thumb.chargeDetailsThree != '' && thumb.theList.length > 2" class="chargeDetailsThreePartC">{{thumb.theList[2][2]}}</p>
        </div>
        <div ng-repeat="thumb in arrayOfFourTiers" ng-if="arrayOfFourTiers.length >= 1" class="figuresFourTier" layout="column" layout-align="center end">
            <p><b>{{thumb.supplier_name}}</b></p>
            <p class="stakedLabel">Staked:</p>
            <p class="staked">{{thumb.staked}}</p>
            <p class="returnsLabel">Returns:</p>
            <p class="returns"> {{thumb.returns}}</p>
            <p class="grossLabel">Gross: </p>
            <p ng-if="thumb.theList.length > 1" class="gross">{{thumb.gross}}</p>
            <p ng-if="thumb.theList.length == 1" class="chargeDetailsOnePartASingleton">{{thumb.theList[0][0]}}</p>
            <p ng-if="thumb.theList.length == 1" class="chargeDetailsOnePartBSingleton">{{thumb.theList[0][1]}}</p>
            <p ng-if="thumb.chargeDetailsOne != '' && thumb.theList.length > 1" class="chargeDetailsOnePartA">{{thumb.theList[0][0]}}</p>
            <p ng-if="thumb.chargeDetailsOne != '' && thumb.theList.length > 1" class="chargeDetailsOnePartB">{{thumb.theList[0][1]}}</p>
            <p ng-if="thumb.chargeDetailsOne != '' && thumb.theList.length > 1" class="chargeDetailsOnePartC">{{thumb.theList[0][2]}}</p>
            <p ng-if="thumb.chargeDetailsTwo != '' && thumb.theList.length > 1" class="chargeDetailsTwoPartA">{{thumb.theList[1][0]}}</p>
            <p ng-if="thumb.chargeDetailsTwo != '' && thumb.theList.length > 1" class="chargeDetailsTwoPartB">{{thumb.theList[1][1]}}</p>
            <p ng-if="thumb.chargeDetailsTwo != '' && thumb.theList.length > 1" class="chargeDetailsTwoPartC">{{thumb.theList[1][2]}}</p>
            <p ng-if="thumb.chargeDetailsThree != '' && thumb.theList.length > 2" class="chargeDetailsThreePartA">{{thumb.theList[2][0]}}</p>
            <p ng-if="thumb.chargeDetailsThree != '' && thumb.theList.length > 2" class="chargeDetailsThreePartB">{{thumb.theList[2][1]}}</p>
            <p ng-if="thumb.chargeDetailsThree != '' && thumb.theList.length > 2" class="chargeDetailsThreePartC">{{thumb.theList[2][2]}}</p>
            <p ng-if="thumb.chargeDetailsFour != '' && thumb.theList.length > 3" class="chargeDetailsFourPartA">{{thumb.theList[3][0]}}</p>
            <p ng-if="thumb.chargeDetailsFour != '' && thumb.theList.length > 3" class="chargeDetailsFourPartB">{{thumb.theList[3][1]}}</p>
            <p ng-if="thumb.chargeDetailsFour != '' && thumb.theList.length > 3" class="chargeDetailsFourPartC">{{thumb.theList[3][2]}}</p>
        </div>
        <div ng-repeat="thumb in arrayOfFiveTiers" ng-if="arrayOfFiveTiers.length >= 1" class="figuresFiveTier" layout="column" layout-align="center end">
            <p><b>{{thumb.supplier_name}}</b></p>
            <p class="stakedLabel">Staked:</p>
            <p class="staked">{{thumb.staked}}</p>
            <p class="returnsLabel">Returns:</p>
            <p class="returns"> {{thumb.returns}}</p>
            <p class="grossLabel">Gross: </p>
            <p ng-if="thumb.theList.length > 1" class="gross">{{thumb.gross}}</p>
            <p ng-if="thumb.theList.length == 1" class="chargeDetailsOnePartASingleton">{{thumb.theList[0][0]}}</p>
            <p ng-if="thumb.theList.length == 1" class="chargeDetailsOnePartBSingleton">{{thumb.theList[0][1]}}</p>
            <p ng-if="thumb.chargeDetailsOne != '' && thumb.theList.length > 1" class="chargeDetailsOnePartA">{{thumb.theList[0][0]}}</p>
            <p ng-if="thumb.chargeDetailsOne != '' && thumb.theList.length > 1" class="chargeDetailsOnePartB">{{thumb.theList[0][1]}}</p>
            <p ng-if="thumb.chargeDetailsOne != '' && thumb.theList.length > 1" class="chargeDetailsOnePartC">{{thumb.theList[0][2]}}</p>
            <p ng-if="thumb.chargeDetailsTwo != '' && thumb.theList.length > 1" class="chargeDetailsTwoPartA">{{thumb.theList[1][0]}}</p>
            <p ng-if="thumb.chargeDetailsTwo != '' && thumb.theList.length > 1" class="chargeDetailsTwoPartB">{{thumb.theList[1][1]}}</p>
            <p ng-if="thumb.chargeDetailsTwo != '' && thumb.theList.length > 1" class="chargeDetailsTwoPartC">{{thumb.theList[1][2]}}</p>
            <p ng-if="thumb.chargeDetailsThree != '' && thumb.theList.length > 2" class="chargeDetailsThreePartA">{{thumb.theList[2][0]}}</p>
            <p ng-if="thumb.chargeDetailsThree != '' && thumb.theList.length > 2" class="chargeDetailsThreePartB">{{thumb.theList[2][1]}}</p>
            <p ng-if="thumb.chargeDetailsThree != '' && thumb.theList.length > 2" class="chargeDetailsThreePartC">{{thumb.theList[2][2]}}</p>
            <p ng-if="thumb.chargeDetailsFour != '' && thumb.theList.length > 3" class="chargeDetailsFourPartA">{{thumb.theList[3][0]}}</p>
            <p ng-if="thumb.chargeDetailsFour != '' && thumb.theList.length > 3" class="chargeDetailsFourPartB">{{thumb.theList[3][1]}}</p>
            <p ng-if="thumb.chargeDetailsFour != '' && thumb.theList.length > 3" class="chargeDetailsFourPartC">{{thumb.theList[3][2]}}</p>
            <p ng-if="thumb.chargeDetailsFive != '' && thumb.theList.length > 4" class="chargeDetailsFivePartA">{{thumb.theList[4][0]}}</p>
            <p ng-if="thumb.chargeDetailsFive != '' && thumb.theList.length > 4" class="chargeDetailsFivePartB">{{thumb.theList[4][1]}}</p>
            <p ng-if="thumb.chargeDetailsFive != '' && thumb.theList.length > 4" class="chargeDetailsFivePartC">{{thumb.theList[4][2]}}</p>
        </div>