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

我有一組數據，它是一組對象。一些對象比另一個有更多的數據。但每個對象都會顯示在每個col-md-4 div中。因此，根據對象的數據量，每個div的高度會有所不同。在ng-repeat中查找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重複後，我想找到的元素的最大高度。然後使用ng-style將最大高度應用於每個元素。

我有一個想法，使用JQuery的方法。但是，我想用Angular來做到這一點？任何建議？ Anuglar不適合DOM操作？

謝謝您的高級。

來源

2015-07-21 Shaohao Lin

是的，Angular不是爲DOM操作而生的，所以你應該使用jQuery。但是，如果您想以角度方式進行操作，則應該將代碼包裝在指令中。 – Rikky

我明白了。 @Rhahayat給了我一個很好的起點。但是，我需要以某種方式返回所有高度，然後操縱它們。 –

我昨天做了一些研究之後。我找到了一個開源角度指令來解決我的問題 - angularJS Vertilize Directive AngularJS指令垂直均衡一組高度不同的元素。換句話說，它動態地使一組元素具有相同的高度。謝謝你做了這個指令的克里斯柯林斯。

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

來源

2015-07-22 13:55:39

我找到的最佳解決方案。我正在使用它來對組件進行ng-repeat，並且它工作得很完美。 – EddyG

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

    } 
    }; 
});

來源

2015-07-21 13:22:18 Mintberry

這就是我正在談論的。感謝您的快速響應，兄弟。 – Rikky

不用擔心，祝你好運！請在您方便時接受。 – Mintberry

先謝了先進，我會試試看，讓你知道。 –

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

回答

相關問題