找到一个div的NG-重复的最大高度 [英] Find the biggest height of a div in ng-repeat

查看:115
本文介绍了找到一个div的NG-重复的最大高度的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

我有一组数据,它是对象的数组。一些对象具有比其它更多的数据。但每个对象将在每个COL-MD-4格显示。因此,每个div的高度将根据对象的数据的多少有所不同。

I have a set of data which is an array of objects. Some objects have more data than the other. But each object will display in each col-md-4 div. Therefore, the height of each div will be different based on how much data an object has.

下面是我的code:

<div class="col-md-12 eventlog-info-container">
  <div class="row eventlogs-single-container">
    <div class="col-md-4 eventlog-1-container" ng-repeat="record in records track by $index">
        <h4>Event Log {{$index}}</h4>
        <ul>
            <li ng-repeat="(key, value) in record">{{::key}}: {{::value}}</li>
        </ul>
    </div>
  </div>
</div>

我的问题是NG重复后,我想找到的元素的最大高度。然后使用纳克式应用的最大高度到每个元件的

My question is after ng-repeat, I want to find the biggest height of the element. And then apply the biggest height to each of the element using ng-style.

我有一个想法接近,使用JQuery的。不过,我想用角来做到这一点?任何建议? Anuglar是不好的DOM操作?

I have an idea to approach that using JQuery. However, I want to use Angular to do that? Any suggestion? Anuglar is not good for DOM manipulation?

感谢您先进的。

推荐答案

在我昨天做了一些研究。我发现了一个开源的角度指令来解​​决我的问题 - angularJS Vertilize指令的一个AngularJS指令垂直扳平一组不同高度的元素。换句话说,它动态地使一组元素的相同的高度。谢谢克里斯·柯林斯谁做这项指令。

After I did some research yesterday. I found an open source angular directive to solve my problem - angularJS Vertilize Directive An AngularJS directive to vertically equalize a group of elements with varying heights. In other words, it dynamically makes a group of elements the same height. Thank you Chris Collins who made this directive.

<div vertilize-container class="row">
  <div ng-repeat="col in columns" class="col-sm-3">
    <div class="well">
      <div vertilize>
       <h3>{{ col.title }}</h3>
       <p>{{ col.body }}</p>
      </div>
    </div>
  </div>
</div>

这篇关于找到一个div的NG-重复的最大高度的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!

查看全文
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆