Question

我正在使用ng-repeat来生成多行，每行包含两个部分。我不知道我总共有多少部分或每个部分有多少内容。

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

我希望同一行上的所有部分都具有相同的高度，但显然上面行中的内容可以抛弃对齐。我知道我可以使用下面但我无法弄清楚如何？

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

Answer 1

我建议使用 Angular.js指令 监视所有列的高度，并确保它们保持相同的高度。我已经为此目的包含了officert编写的一个小指令。将指令添加到您希望大小相同的每个元素，并调整所选列的大小以匹配最高列：

使用示例

<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引导列具有相同的高度

1 个答案: