javascript - 使用 NG-Repeat 的相同高度 DIV

标签 javascript jquery html css angularjs

当使用 ng-repeat 生成每个 div 的内容时,我在尝试获取两个并排的相同高度的 div 时遇到问题。 Flex 框阻止了网站的响应,我不知道什么时候调用 Jquery 函数是合适的时间,因为 View 是嵌套的,并且当显示新的 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>

最佳答案

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

将所有内容包装在一个容器中:

<div class="row container">

然后对容器进行样式设置以使用 flex 是我通常这样做的方式

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

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

关于javascript - 使用 NG-Repeat 的相同高度 DIV,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/32854893/

相关文章:

html - 在两个垂直 div 之间放置一个可滚动的 div

javascript - 气泡图c3js

javascript - 如何在 Karma/Mocha 测试套件中测试 Angular 1.5 Controller ?

javascript - 使用 javascript 根据滚轮设置 div 元素的位置

javascript - 如何将两个功能(其中一个必须延迟)放在一个 onclick 按钮中?

html - 如何用响应式包装 div 元素框

html - cfmail 标签中的表

Javascript:回调注入(inject)替代方案?

javascript - 翻译 html5 Canvas

jquery 工具提示不完全可见