在 ng-repeat 中查找 div 的最大高度

Question

我有一组数据，它是一个对象数组。一些对象的数据比其他对象多。但是每个对象都会显示在每个 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-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-repeat 之后，我想找到元素的最大高度。然后使用 ng-style 将最大高度应用于每个元素。

我有一个想法来使用 JQuery 来解决这个问题。但是，我想使用 Angular 来做到这一点？有什么建议吗？ Anuglar 不适合 DOM 操作？

谢谢你。

Answer 1

在我昨天做了一些研究之后。我找到了一个开源 angular 指令来解决我的问题 - angularJS Vertilize Directive 一个 AngularJS 指令，用于垂直均衡一组具有不同高度的元素。换句话说，它动态地使一组元素具有相同的高度。感谢 Chris Collins 制定了此指令。

<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>

Answer 2

This 的回答应该能让你走上正确的道路。

<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 outer-height ng-repeat="(key, value) in record">{{::key}}: {{::value}}</li>
        </ul>
    </div>
  </div>
</div>


app.directive('outerHeight', function(){
  return{
    restrict:'A',
    link: function(scope, element){
       //using outerHeight() assumes you have jQuery
       // if not using jQuery
       console.log(element.outerHeight()); 

    }
  };
});