AngularJS / Bootstrap CSS：错误的面板对齐到 ng-repeat 内的 2 列答案

【问题标题】：AngularJS / Bootstrap CSS: Wrong panels alignments into 2 columns inside a ng-repeatAngularJS / Bootstrap CSS：错误的面板对齐到 ng-repeat 内的 2 列
【发布时间】：2015-07-21 18:26:09
【问题描述】：

我对带有 AngularJS 的 Bootstrap 面板有疑问。我无法正确对齐我的面板。我想将我的面板显示为 2 列。

我有以下 HTML 代码：

<div class="row">
  <div class="col-lg-3 col-sm-3 col-xs-3">
    <span>Some stuffs</span>
  </div>
  <div class="col-lg-9 col-sm-9 col-xs-9">
    <div class="row">
       <div class="col-lg-6 col-sm-6 col-xs-6"
            ng-repeat="i in items">
         <div  class="panel panel-default">
          <div class="panel-heading">
            <h3 class="panel-title">{{i.title}}</h3>
          </div>
          <div class="panel-body">
            {{i.content}}
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

基本情况：比方说，我有 3 个项目。前 2 个项目将显示在第一行。 - item1：row0/col0 - 项目 2：row0/col1 最后一项应显示在第二行第一列 - item3: row1/col0

当面板的高度相同时，它可以正常工作。

我的用例：我的面板内容可以彼此不同。因此，当我的第一个面板内容比其他面板内容大时，第三个项目转到 col1。 - item3: row1/col1

它留下了一个很大的空间，然后如果我想添加第 4 项......它变得丑陋:(

我创建了一个演示问题：http://plnkr.co/edit/TZDck5b9G9Ap32KlPk4q?p=preview

【问题讨论】：

如果你没有让所有列的高度相同的问题，那么我建议你使用这个指令：github.com/Sixthdim/angular-vertilize。它将所有容器的高度设置为相同（这些的最大值）
谢谢！它工作正常

标签： css angularjs twitter-bootstrap-3

【解决方案1】：

我能想到的唯一解决方案是正确显示第 3 个 div，无论其大小如何，前 2 个 div 使用一行，下 2 个 div 使用另一行（依此类推）。您可以通过将 ng-repeat 迭代放在行 div 之外并在迭代位于添加元素上时有条件地分配行类来做到这一点。

<div ng-repeat="i in items">
    <div ng-if="$even" class="row">
      <div class="col-lg-6 col-sm-6 col-xs-6">
        <div class="panel panel-default">
          <div class="panel-heading">
            <h3 class="panel-title">{{i.title}}</h3>
          </div>
          <div class="panel-body">
            {{i.content}}
          </div>
        </div>
      </div>
      <div class="col-lg-6 col-sm-6 col-xs-6" ng-if="items[$index + 1]">
        <div class="panel panel-default">
          <div class="panel-heading">
            <h3 class="panel-title">{{items[$index + 1].title}}</h3>
          </div>
          <div class="panel-body">
            {{items[$index + 1].content}}
          </div>
        </div>
      </div>
    </div>
</div>

当然，缺点是您正在复制列的标记（显示实际面板的标记），如果您为此部分创建指令，则可以避免这种情况。我知道 Exlord 的解决方案更简单，但是我觉得这更接近 Angular / Bootstrap 方式，因为否则你通过“强制”行的列分成多行来有效地覆盖 Bootstrap 的行系统（使用 clear ：对）。

在此处查看更新的 plunkr：http://plnkr.co/edit/7KMZdzcpR7Ff2D6pExVB?p=preview

【讨论】：

这不是 gana 工作，现在每列都在 2 个 div 内，没有浮动
@Exlord 在阅读您的评论后我明白了您的意思，但奇怪的是它实际上正在工作。我正在审查它，看看我是否能找到更好的方法来做我提议的事情

【解决方案2】：

<div ng-repeat="..." ng-class="{clear_right:$odd}">
    //your panel content here   
</div>

.clear_right{clear:right;}
.clear_right:after{content:" ";display:block;}

【讨论】：

【解决方案3】：

@Christina：不错的解决方案，但您失去了范围。在我复杂的模板 html 中，我需要访问父范围。我将指令更改为构建从父级继承的新范围，请参阅 plunker fork http://plnkr.co/edit/CCwbnZCE7e8ej2fFBi2e?p=preview

app.directive('panelContent', function(){
 return {
  restrict: 'E',
  scope: true,
  templateUrl: 'panel-content.html',
  link: function(scope, element, attributes){
    scope.item = scope.$eval(attributes["item"]);
  }
 };
})

03.06.15 更新：

如果您添加或删除项目，{{$index +1}} 解决方案将导致问题。在这种情况下，anguluar 遇到数据绑定问题，并且不会将视图更新为修改后的集合。

现在我用一个

解决了这个问题

   <div ng-if="$even" style="clear: both;"></div>

在 ng-repeat 块中

 <div ng-repeat="item in myItems">
      <div ng-if="$even" style="clear: both;"></div>
      <item-content /> <!-- directive that adds the content for each item ( or direct html if you want)-->
 </div>

【讨论】：