使用 NG-Repeat 的相同高度 DIV答案

【问题标题】：Same Height DIV's using NG-Repeat使用 NG-Repeat 的相同高度 DIV
【发布时间】：2015-12-27 13:52:42
【问题描述】：

当使用 ng-repeat 生成每个 div 的内容时，我在尝试让两个高度相同的 div 并排时遇到问题。 Flex 框使网站停止响应，我无法确定何时是调用 Jquery 函数的合适时间，因为视图是嵌套的，并且在显示新的 html 时页面实际上并没有加载。我尝试了 ng-repeat-start 和 end 无济于事。

理想情况下，一旦内容加载完毕，我希望右侧的 div 与左侧的 div 高度相同。非常感谢您对问题的任何帮助。

干杯

编辑 - 包含代码

    <div class="row">
        <div class="noSpacing col-xs-6">
            <div class="col-xs-12 noSpacing rottnestGreen">
                <div ng-repeat="bh in bikeHire" class="row">
                    <p class="col-xs-6">{{bh.type}}</p>
                    <select class="inline col-xs-3 noSpacing np" ng-model="bikeHire[$index].quantity" ng-options="ddl for ddl in ddlNumbers" ng-change="addOps(bh.type, bikeHire[$index].quantity, bh.price)"></select>
                    <p class="col-xs-3 blueText">{{bh.price | currency}}</p>
                </div>
            </div>
        </div>
        <div class="noSpacing col-xs-6">
            <div class="col-xs-12 noSpacing np rottnestGreen">
                <div ng-repeat="sf in sAndF" class="row">
                    <p class="col-xs-6">{{sf.type}}</p>
                    <select class="inline col-xs-3 noSpacing np" ng-model="sf.quantity" ng-options="ddl for ddl in ddlNumbers" ng-change="addOps(sf.type, sf.quantity, sf.price)"></select>
                    <p class="blueText col-xs-3">{{sf.price | currency}}</p>
                </div>
            </div>
        </div>
        <div class="clearfix"></div>
    </div>

【问题讨论】：

请发布您的代码。干杯
这只能通过使用固定高度或弹性框来解决，或者在 ng-repeat 运行后运行 javascript 来调整高度。您可以在$scope.$on('$viewContentLoaded' 和$window.on('resize' 事件上附加事件
感谢您的回复，我已经实现了 $scope.$on('$viewContentLoaded' 功能，但是，它在父页面完成加载时触发，而不是在所需的子页面时触发。功能 $ scope.$on('$viewContentLoaded' 包含在子控制器中。

标签： javascript jquery html css angularjs

【解决方案1】：

您正在寻找这样的东西吗？ https://jsfiddle.net/yczgaLgm/2/

将所有内容包装在容器中：

<div class="row container">

然后为容器设置样式以使用 flexing 是我通常这样做的方式

.container {
    display: flex;
    flex-wrap: wrap;
}

最大的缺点是 IE 支持，I dont hope you are supporting below IE10？

【讨论】：