在ng-repeat

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

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

-Drobolectric.logging=stdout

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()); 

    }
  };
});