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

Question

我正在使用 this使 div 高度相同的 jquery 插件。为了使插件正常工作，我必须将 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 插件 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>