具有相同高度的ng-repeat引导程序列 [英] ng-repeat bootstrap columns with the same hight

问题描述

我正在使用ng-repeat生成多行，每行有两个部分.我不知道我总共有多少节，或者每个节中有多少内容.

I am using ng-repeat to spawn multiple rows each with two sections. I do not know how many sections I have in total or how much content is in each section.

<div class="row">
  <div class="col-sm-6" ng-repeat="(key, values) in additionalDetails">
    <h3>{{key}}</h3>
    <ul>
      <li ng-repeat="(key, value) in values">{{value}}</li>
    </ul>
  </div>
</div>

我希望同一行上的所有部分都具有相同的高度，但显然上一行中的内容可能会使对齐方式偏离.我知道我可以使用下面的内容，但我不知道该怎么做?

I want all the sections on the same row to be the same height but obviously the content in the row above can throw the alignment off. I know I can use the below but I can't figure out how?

<div class="clearfix visible-sm-block"></div>

推荐答案

我建议使用 Angular.js指令，该指令监视所有列的高度，并确保它们保持相同的高度.为此，我添加了一个 legest 编写的指令.将指令添加到您希望大小相同的每个元素中，您选择的列将被调整大小以匹配最高列:

I would recommend to use an Angular.js directive that watches the heights of all your columns, and ensures that they remain the same height. I've included a little directive written by officert for this purpose. Add the directive to each element that you want to be the same size, and your selected columns will be resized to match the tallest column:

用法示例

<div class="question-list" equal-heights=".question" equal-heights-items="questions">
  <div class="question col-md-3" ng-repeat="question in questions">
     <h4>{{ question.question }}</h4>
     <p ng-bind-html="question.answer"></p>
  </div>
</div>

指令:

angular.module('myApp').directive('equalHeights', [
  '$timeout',
  function($timeout) {
    return {
      restrict: 'A',
      scope: {
        equalHeightsItems: '='
      },
      link: function(scope, element, attrs) {

        var selector = attrs.equalHeights;

        scope.$watch('equalHeightsItems', function(newVal) {
          if (newVal && newVal.length) {
            $timeout(function() {
              equalize();
            });
          }
        });

        function equalize() {
          var height = 0;

          var $elements = element.find(selector);

          _.each($elements, function(el) {
            var $el = angular.element(el);
            var elHeight = $el.outerHeight();

            if (elHeight > height) height = elHeight;
          });

          $elements.height(height);
        }
      }
    };
  }
]);

这篇关于具有相同高度的ng-repeat引导程序列的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！