如何为 ng-repeat 生成的所有 div 获得相等的高度

Question

我正在使用this jquery 插件来使 div 的高度相同。为了使插件工作，我必须将equalheight 添加到我想要具有相同高度的 div 中。当 div 不是由 ng-repeat 生成时，它可以工作。

如何让ng-repeat生成的所有div都一样高？

html

<div class="col-md-4" ng-repeat="dept in mainCtrl.departments" ng-hide="filteredCareers.length == 0">
    <div class="job_list_box" ng-class="{'equalheight': filteredCareers.length > 0 }">
        <div class="job_list_icon">
            <img ng-src="{{dept.icon}}" alt="{{dept.name}}">
        </div>
        <h4 class="job_list-box-title">{{dept.name}}</h4>
        <ul class="job_list">
            <li ng-repeat="hiring in mainCtrl.careers | filter:dept.name as filteredCareers">
                <a href="#" data-toggle="modal" data-target="#job-modal-{{hiring.id}}">{{hiring.name}}</a>
            </li>
        </ul>
    </div>
</div>

控制器

var app = angular.module('myApp', [])
app.controller('MainController', function ($scope, $http) {
    var self = this;
    $http({
        method: 'GET',
        url: 'json/departments-archives.json'
    }).then(function (response) {
        self.departments = response.data;
    }, function () { console.log('Error'); }); 
    $http({
        method: 'GET',
        url: 'json/careers-archives.json'
    }).then(function (response) {
        self.careers = response.data;

    }, function () { console.log('Error'); });
});

我尝试使用setTimeout，然后我在带有job_list_box 类的div 上添加了{{mainCtrl.setHeight}}，但它不起作用。

setTimeout(function(){
    self.setHeight = "equalheight"
},100)

我还尝试了我在网上找到的其他解决方案，例如角度插件 angular-vertilize、flexbox 方法..等等，但都没有奏效。

Answer 1

在您链接的插件中，加载库时会自动调整大小。这可能发生在您的 Angular 应用程序渲染元素之前。

虽然我找不到任何显式的 API，但在 JS 文件中挖掘，我发现了这个初始化代码：

$('.equalheight').simpleequalheight({
    responsive: true
});

一些方便的链接讨论了在 Angular 中为动态渲染元素初始化 jQuery 插件： Link 1 Link 2

也许在您的 Angular 应用渲染后运行它可能会有所帮助？

作为替代方案，我建议使用 flexbox 来处理这个问题。示例：

.col1 {
  background: red;
}

.col2 {
  background: yellow;
}

.col3 {
  background: pink;
}

.col {
  padding: 0.5rem;
}

.container {
  display: flex;
}

<div class="container">
  <div class="col col1">Lorem Ipsum is simply dummy text of the printing and typesetting industry. </div>
  <div class="col col2">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.</div>
  <div class="col col3">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It
    has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop
    publishing software like Aldus PageMaker including versions of Lorem Ipsum.</div>
</div>

Answer 2

不确定它是否需要插件，似乎可以使用height & overflow 属性来完成

div {
  height: 100px;
  overflow: auto;
  border: 1px solid green;
  margin-top: 30px;
}

<div>
  It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using 'Content here,
  content here', making it look like readable English. Many desktop publishing packages and web page editors now use Lorem Ipsum as their default model text, and a search for 'lorem ipsum' will uncover many web sites still in their infancy. Various versions
  have evolved over the years, sometimes by accident, sometimes on purpose (injected humour and the like).
</div>
<div>
  It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is
</div>

Answer 3

在 css 中使用 ma​​x-height 或 flex box 属性。