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

问题描述

我有一组数据是一组对象。一些对象比其他对象有更多的数据。但每个对象将显示在每个col-md-4 div中。因此，每个div的高度将根据对象有多少数据而不同。

这是我的代码：

 < div class =col-md-12 eventlog-info-container> 
< div class =row eventlogs-single-container> 
< div class =col-md-4 eventlog-1-containerng-repeat =在记录轨道中记录$ index> 
< h4>事件日志{{$ index}}< / h4> 
< ul>记录中的
< li ng-repeat =（key，value）{{:: key}}：{{:: value}}< / li> 
< / ul> 
< / div> 
< / div> 
< / div> 
  

我的问题是ng-repeat之后，我想找到元素的最大高度。然后将最大的高度应用到每个元素使用ng样式。

我有一个想法来使用JQuery。但是，我想用Angular来做这个吗？任何建议？ Anuglar不适合DOM操作？

谢谢高级。

解决方案

昨天我做了一些研究。我发现一个开源角度指令来解​​决我的问题 - angularJS Vertilize指令 AngularJS指令垂直平衡不同高度的一组元素。换句话说，它动态地使一组元素具有相同的高度。谢谢你做了这个指令的Chris Collins。

 < div vertilize-container class =row> 
< divng-repeat =col in columnsclass =col-sm-3> 
< div class =well> 
< div vertilize> 
< h3> {{col.title}}< / h3> 
< p> {{col.body}}< / p> 
< / div> 
< / div> 
< / div> 
< / 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.

Here is my 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>

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.

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?

Thank you in advanced.

解决方案

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>

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