Question

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

如何使所有由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，然后我在课程{{mainCtrl.setHeight}}的div上添加了job_list_box，但它没有用。

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

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

Answer 1

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

虽然我找不到任何明确的API，但通过JS文件挖掘，我发现了这个初始化代码：

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

一些方便的链接，讨论初始化Angular中动态呈现元素的jQuery插件： Link 1 Link 2

也许在你的角度应用渲染之后运行它可能有帮助吗？

作为替代方案，我建议使用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＆amp; 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中使用 max-height 或flex box属性。

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

3 个答案: